Object-fit cover for background videos.
It's a new CSS property for sizing background videos like background images. IE and Edge not supported.
A Pen by Dylan Macnab on CodePen.
<section class="video-container"> | |
<video src="https://player.vimeo.com/external/181445574.hd.mp4?s=d24f32d879305e931468d55e4d7ce6efb5a95c39&profile_id=119" autoplay loop playsinline></video> | |
<div class="callout"> | |
<h1>Object-Fit 👍</h1> | |
<div>The CSS Background-Size: Cover for Inline Images & Videos</div> | |
</div> | |
<div class="support"> | |
<a href="http://caniuse.com/#search=object-fit">Browser Support</a><br> | |
<a href="https://github.com/jonathantneal/fitie">Need to support IE & Edge?</a> | |
</div> | |
</section> |
/*** T H E - M A G I C - O F - O B J E C T - F I T ***/ | |
/*****************************************************/ | |
.video-container { | |
height: 50vh; | |
position: relative; | |
overflow: hidden; | |
@media(min-width: 600px) { | |
height: 100vh; | |
} | |
} | |
video { | |
object-fit: cover; // Set the magic | |
position: absolute; | |
height: 100%; | |
width: 100%; | |
top: 0; | |
left: 0; | |
} | |
/*** A E S T H E T I C S ***/ | |
/***************************/ | |
* { | |
box-sizing: border-box; | |
} | |
body { | |
background: #333; | |
color: white; | |
} | |
.video-container:after { | |
content: ''; | |
display: block; | |
height: 100%; | |
width: 100%; | |
position: absolute; | |
top: 0; | |
left: 0; | |
background: rgba(black, .2); | |
z-index: 1; | |
} | |
h1 { | |
text-transform: uppercase; | |
font-weight: 900; | |
margin: 0 0 1rem; | |
padding: 0; | |
line-height: 1; | |
font-family: Futura, Helvetica, sans-serif; | |
font-size: 5vw; | |
@media (max-width: 400px) { | |
font-size: 22px; | |
} | |
@media (min-width: 1200px) { | |
font-size: 75px; | |
} | |
} | |
.callout { | |
position: relative; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
flex-direction: column; | |
height: 100%; | |
text-align: center; | |
position: relative; | |
z-index: 10; | |
} | |
.support { | |
position: fixed; | |
bottom: 60px; | |
right: 20px; | |
text-transform: uppercase; | |
font-size: 9px; | |
letter-spacing: 1px; | |
text-align: right; | |
position: relative; | |
z-index: 10; | |
a { | |
color: white; | |
text-decoration: none; | |
position: relative; | |
display: inline-block; | |
margin-top: 10px; | |
&:before { | |
display: block; | |
position: absolute; | |
content: ''; | |
bottom: -2px; | |
width: 0; | |
height: 1px; | |
background-color: rgba(white, .3); | |
transition: .3s; | |
} | |
&:hover:before { | |
width: 100%; | |
} | |
} | |
} |