<div class="header">
<svg viewBox="0 0 1920 1080" width="1920px" height="1080px">
<mask id="mask" x="0" y="0" width="100%" height="100%" >
<rect x="0" y="0" width="100%" height="100%"/>
<text x="0" y="0">
<tspan x="0" dy="1.2em">Just</tspan>
<tspan x="0" dy="1.2em">build</tspan>
<tspan x="0" dy="1.2em">websites</tspan>
</text>
</mask>
<rect x="0" y="0" width="100%" height="100%"/>
</svg>
<video autoplay="autoplay" muted="muted" preload="auto" loop="loop">
<source src="http://mazwai.com/system/posts/videos/000/000/123/original/victor_ciurus--5d_mark_iii_magic_lantern_14_bits_raw_video.mp4?1412890624" type="video/mp4">
<source src="http://mazwai.com/system/posts/videos/000/000/123/webm/victor_ciurus--5d_mark_iii_magic_lantern_14_bits_raw_video.webm?1412890624" type="video/webm">
</video>
</div>
svg rect {
fill: white;
-webkit-mask: url(#mask);
mask: url(#mask);
}
svg {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
font-family: Helvetica, Arial, sans-serif;
font-weight:700;
font-size: 160px;
}
video {
position: absolute;
top: 0;
left: 0;
}
video, svg {
width: 100%;
}
.header {
position: relative;
}
This Pen doesn't use any external CSS resources.