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.
/*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>