Full-width Background Videos in Internet Explorer

Question

I am designing a website that uses a self-hosted background video in a 100% width container. Works flawlessly in Chrome and Firefox but fails miserably in IE (tested in IE 11).

The video is supposed to stretch width-wise to fill the container - maintaining the video proportions, however, IE simply places the video in the container at the size necessary to fill the container vertically.

Link to Page with Error

Try adding a meta tag on html in head section.. – yjs Dec 17 '15 at 06:44 — yjs, Dec 17 '15 at 06:44

score 8 · Answer 1 · answered Dec 17 '15 at 07:18

/*you can use this css.*/

.fullwidth-video {
position: absolute;
top: 0;
left: 0;
z-index: 1;
min-height: 100%;
min-width: 100%;
-webkit-transform-style: preserve-3d;
}
.fullwidth-video video {
position: absolute;
top: 0;
left: 0;
z-index: 1;
min-height: 100%;
min-width: 100%;
height: auto;
width: 100%;
object-fit: cover;
}

html code here...

     <div class="fullwidth-video">
     <video preload="auto" autoplay loop muted="">
       <source src="http://sawyerfirm.ignitte.com/wp-content/uploads/2015/12/Girl-Riding-In-Car-8-BW.mp4" type="video/mp4">
       <source src="http://sawyerfirm.ignitte.com/wp-content/uploads/2015/12/Girl-Riding-In-Car-8-BW.webm" type="video/webm">
     </video>
     </div>

Banti Mathur · Answer 2 · 2015-12-17T06:54:44.270

You can Use this i hope it works for you :)

 This is html code :
 <div class="video-frame">
<video class="video-box" autoplay  poster="video-back.jpg" id="bgvid" loop>
<source src="sample.webm" type="video/webm">
<source src="sample.mp4" type="video/mp4">
</video>
</div>

This is css code :
.video-frame { position:relative;margin:40px auto;width:100%;}
.video-box { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); background: url('video-back.jpg') no-repeat; background-size: cover; transition: 1s opacity;}

Amit Shah · Answer 3 · 2017-02-23T11:22:01.737

SOLVED

I had same issue for width in IE: the solution i found is removing the additional custom css applied over the <video> tag.

This much code should work:

<!DOCTYPE html>
<html>

<body>

<video width="100%" height="" autoplay>
  <source src="http://sawyerfirm.ignitte.com/wp-content/uploads/2015/12/Girl-Riding-In-Car-8-BW.mp4" type="video/mp4">  
  Your browser does not support the video tag.
</video>

</body>

</html>

Then try to remove any additional class/style applied over/inside your tag

score 1 · Answer 4 · answered Oct 18 '18 at 16:22

1

object-fit: cover is not supported by IE. Use the following library, acts as a fallback for IE :

https://github.com/constancecchen/object-fit-polyfill

answered Oct 18 '18 at 16:22

rvirk

19
3

The answer seems ok. But where is the "cover" from? – E.Coms Oct 18 '18 at 16:59
object-fit: cover can used as css property for firefox and chrome but it doe not work for IE – rvirk Jan 10 '19 at 19:01

prod3v3loper · Answer 5 · 2019-03-07T13:29:30.963

On IE set height to auto for video.

On Other Browsers:

.video {

    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;

    /* HTML video tag */
    &__player, video {

        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* IE not work */
    }
}

On IE:

.video {

    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;

    /* HTML video tag */
    &__player, video {

        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: auto; /* IE change to auto */
    }
}

And the HTML:

<div class="video">
    <video class="video__player" width="400" muted loop>
        <source src="XXX" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
</div>

Full-width Background Videos in Internet Explorer

5 Answers5