Skip to content

Instantly share code, notes, and snippets.

@maxxcrawford
Last active November 11, 2016 17:22
Show Gist options
  • Save maxxcrawford/68b3857b645d3e41b21ddc4fe7547bae to your computer and use it in GitHub Desktop.
Save maxxcrawford/68b3857b645d3e41b21ddc4fe7547bae to your computer and use it in GitHub Desktop.
:root {
font-size: calc(1vw + 1vh + .2vmin);
}
body {
background: #111;
font: 1rem/1.1 "Montserrat", sans-serif;
margin: 0;
}
section {
height: 100%;
overflow: hidden;
position: relative;
}
video {
bottom: 0;
height: 100%;
left: 0;
margin: 0;
padding: 0;
top: 0;
right: 0;
width: 100%;
}
.vignette {
background: rgba(0, 0, 0, 0.6);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
h1 {
color: #fff;
font-size: 4rem;
margin: 3rem;
position: absolute;
text-transform: uppercase;
width: 100%;
z-index: 2;
}
<section>
<div class="vignette"></div>
<h1>Advertising.<br>Digital.<br>Social.</h1>
<!-- video from http://evb.com -->
<video loop preload autoplay>
<source id="source_polar_mp4" src="http://d2pxo8g26zv991.cloudfront.net/wp-content/uploads/2014/10/HomeVideo_v04_1.mp4" type="video/mp4;codecs=&quot;avc1.42E01E, mp4a.40.2&quot;">
<source id="source_polar_webm" src="http://d2pxo8g26zv991.cloudfront.net/wp-content/uploads/2014/10/HomeVideo_v04_1.webm" type="video/webm;codecs=&quot;vp8, vorbis&quot;">
</video>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment