That's an interesting observation. I had to do some research.
When you load a video source directly into browser, is basically creates a page for you based on what it reads from the loaded video. Even while it's loading, even the browser doesn't know the size:
As soon as the "meta" parts of the video has loaded, the browser knows the exact dimensions of the video, and assigns this to CSS width
and height
so that the video is correctly sized. Because it already has assigned the width and height, it can use CSS object-fit: contain
, because scaling is already blocked by width and height pulled from the video. When the video enters fullscreen, the browser simply removes width and height, so that object-fit: contain
remains, simply allowing the video to scale up to fit inside the screen.
When you load a video into a "page" however (for example Files Gallery), we need to embed the video at a specific size (either % or px). In Files Gallery we scale the <video>
element to 100% height, and to prevent the video from scaling beyond it's native pixel-resolution, we then need to use object-fit: scale-down
because we can't assign exact pixel dimensions. The object-fit: scale-down
option then seems to block the video from scaling up in fullscreen mode, which seems unfortunate ... I didn't think about that before you mentioned it.
I think there is a solution for this in CSS, by using the :fullscreen
pseudo class:
.popup-video:fullscreen {
object-fit: contain;
}
I will add this to next release. In the meantime, you can add the above to custom CSS.
PS! The issue with videos loaded directly into browser are the same as when loading an IMAGE file directly into browser. The browser will display the image at it's natural pixel dimensions (because it knows as soon as the image is loaded). When you embed an image into a page however, unless you know the image dimensions up front, the image would need to be embedded at an arbitrary size.