Is there another way of simulating object-fit:fill on a video element so that all major browsers recognize it?

Question

I have a video with specific dimensions. When I first try to use it, the browser letterboxes the video at the sides (in an effort to maintain aspect ratio). I applied the object-fit: fill property and it worked for every browser I tested on except I.E. I even tried to use a polyfill (which seemed promising at first):( https://github.com/anselmh/object-fit) but I could not get it to work on the video. I have tried other techniques such as making a video wrapper class a scaling the video, but I could not do it without the video looking horrible. Does anyone have any idea how I can achieve this (possibly through JavaScript)? Here is some code:

.video{
        height:1000px;
        width:100%;
  /*I tried doing this below but does not work in I.E.*/
    /*object-fit: fill;
            -o-object-fit: fill;
            overflow: hidden;*/
  
}

/*I have also tried the following*/
/*.videowrapper {
    position: relative;
    width: 100%;
    height: 1000px;
}

    .videowrapper video {
        width: 100%;
        height: 100%;
        -webkit-transform: scaleX(2); (I tried various scales but none of them looked good)
        -moz-transform: scaleX(2);
        -ms-transform: scaleX(2);
        transform: scaleX(2);
    }*/

<div class"=videowrapper">
<video id="video" class="video">
<source src=".../video.mp4" type="video/mp4" />
<source src=".../video.webm" type="video/webm" />
<source src=".../video.ogg" type="video/ogg" />
</video>
 </div>

So is anyone aware of any creative JS/JQuery or even CSS methods I can possibly utilize to make this work? Thank you.

score 2 · Answer 1 · answered May 20 '15 at 16:50

I ended up using a canvas tag instead:

 document.addEventListener('DOMContentLoaded', function () {
            var v = document.getElementById('video');
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

            v.addEventListener('loadedmetadata', function () {
                canvas.width = v.videoWidth;
                canvas.height =
                    v.videoHeight;
            });
            video.addEventListener('play', function () {
                var $this = this; //cache
                (function loop() {
                    if (!$this.paused && !$this.ended) {
                        ctx.drawImage($this, 0, 0);
                        setTimeout(loop, 1000 / 30); // drawing at 30fps
                    }
                })();
            }, 0);
        });

<canvas id="canvas" style="width: 100%; height: 100%;">
<video id="video" controls="controls" class="hidden" autoplay="autoplay" loop="loop" poster="images/video.jpg">
        <source src="video.mp4" type="video/mp4" />
        <source src="video.webm" type="video/webm" />
        <source src="video.ogg" type="video/ogg" />

    </video>
    </canvas>

Danny Bullis · Answer 2 · 2015-05-15T20:38:01.317

1

The same sort of problem is common with getting images to scale correctly as well. A cross-browser approach that you can try would be as such:

.video {
    width: 100%;
    height: auto;
}

If you have a max-height you want to restrict the video to (or a min-height):

.video {
    width: auto;
    max-height: <your value>;
    height: <%>; /* starting size */
    min-height: <your value>;
}

edited May 15 '15 at 20:38

answered May 15 '15 at 20:10

Danny Bullis

3,043
2
29
35

When I tried this, there was whitespace on the right side of the video. Thanks for the suggestion though. – Bastian May 15 '15 at 20:52
As in the video isn't centering in its parent container? If you're trying to fill up the entire height and width of the parent container, your video will get clipped either on the sides, top, or bottom - are you willing to have to deal with that in order to get rid of the whitespace? – Danny Bullis May 15 '15 at 21:35
I prefer the video not get clipped, or see any white-space, but I know there is only so much one can do to have the videos appear perfect (I may be asking too much here), but before settling and sticking with the video getting clipped I wanted to make sure to explore my options before resorting to that. – Bastian May 16 '15 at 05:31
1

Yeah, aside from getting the footage in a different aspect ratio, you're kind of stuck. There may be a complex solution involving programmatically altering the aspect-ratio of the footage at the byte-level, done by a low-level language, similar to how your computer monitor is able to display various resolutions within the fixed size of your monitor. This would downgrade the video quality, however, as that would involve calculations which would delete pixels. Try googling around for a video resolution converter, get a few resolutions, then use JS to pick the best resolution given screen size. – Danny Bullis May 16 '15 at 09:26
1

No problem. If you wouldn't mind, shoot us an update with your chosen method :]. I just had a co-worker come to me with the same exact sort of question last week, so you're not alone. – Danny Bullis May 18 '15 at 17:18

Is there another way of simulating object-fit:fill on a video element so that all major browsers recognize it?

2 Answers2

Linked