1

On my site I have a <video> element inside a <div>. I use this <div> to define the video aspect-ratio, and let the user change it if necessary (sometimes the encoded video has an incorrect ratio). The <video> always fills the <div> with the "object-fit: fill;" CSS property.

But... When the user enters to fullscreen mode, the screen becomes the container. And it is a problem, because of all the different display ratios out there.

Is there a way to manipulate/limit the fullscreen size?

<div style="width: 960px; height: 540px; background: #bfbfbf; display: block; margin: 0 auto;">
<video style="object-fit: fill;">
<source src="" />
</video>
</div>
iPog
  • 63
  • 2
  • 10
  • It's also worth remembering object-fit doesn't work in MS Edge - you can up-vote it here though: https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/32011258-object-fit-and-object-position-for-all-media-elem – pjk_ok Feb 09 '18 at 23:59

1 Answers1

-1

Add "controls" to activate controls for the video

<html>
<head>
<style>
    .div
    {
        background-color: #bfbfbf;
        width: 960px;
        height: 540px;
        display: block;
        margin: 0 auto;
        background-size: cover;
    }
</style>
</head>
<body>
<div class="div">
    <video style="object-fit: fill; width: 960px; height: 540px;" controls>
        <source src="video.mp4" type="video/mp4">
    </video>
</div>
</body>
</html>
dsafewgf2g
  • 113
  • 6