Full-width Background Videos in Internet Explorer

digitalJE5U5 picture digitalJE5U5 · Dec 17, 2015 · Viewed 13.6k times · Source

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.

Screenshot of video stretching to fill container width in Chrome Screenshot of video failing to fill container in IE

Link to Page with Error

Answer

narendra.lodhi picture narendra.lodhi · Dec 17, 2015
/*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>