Making a full screen video background

For the html:

<video poster="" id="bgvid" playsinline autoplay muted loop>
<source src="" type="video/webm">
<source src="" type="video/mp4">

For the css:

video {
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('//') no-repeat;
background-size: cover;
transition: 1s opacity;

See the following codepen:

{} + {dudleystorey/pen/knqyK}

Leave a Reply