JSFiddle - React, Tailwind, and code Playground

attempt at pure css workaround for object-fit:cover on video elements in IE

by CBroe

HTML

<h1>We Are The 99 Percent</h1>
<p>Of Page Content.</p>
<p>Of Page Content.</p>
<p>Of Page Content.</p>
<p>Of Page Content.</p>
<p>Of Page Content.</p>
<p>Of Page Content.</p>
<p>Of Page Content.</p>
<p>Of Page Content.</p>
<p>Of Page Content.</p>
<p>Of Page Content.</p>
<p>Of Page Content.</p>
<p>Of Page Content.</p>
<p>Of Page Content.</p>
<div>
<video src="https://video.xx.fbcdn.net/v/t43.1792-2/1163531_10201011063870291_31981_n.mp4?efg=eyJybHIiOjIxMzEsInJsYSI6MTE1MiwidmVuY29kZV90YWciOiJsZWdhY3lfaGQifQ%3D%3D&rl=2131&vabr=1421&oh=7999e392f85b63f3bebb5b6fb56f807a&oe=57521FA6" autoplay></video>
</div>

CSS

video { position:fixed; top:0; right:0; bottom:0; left:0;
xobject-fit:cover; width:100%; height:100%; max-width:auto; max-height:auto; margin:auto; z-index:-1; }

/* put some ie selector hack here */ div {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}
/* put some ie selector hack here */ video {
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    /* object-fit: cover; */
    width: auto;
    margin: auto;
    
}

JavaScript

/*
add media queries based on video aspect ratio maybe?
*/