<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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js