<header>
	<video autoplay playsinline muted loop preload poster="https://dl.dropboxusercontent.com/s/yp299eo9t3qmqtp/screen.png">
		<source src="https://dl.dropboxusercontent.com/s/xqdajoux8kdtyug/cocktail.webm" />
    <source src="https://dl.dropboxusercontent.com/s/jw3vzz3cyvnua6x/cover_blog.mp4" />
	</video>
 	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 80" preserveAspectRatio="xMidYMid slice">
    <defs>
    <mask id="mask" x="0" y="0" width="100%" height="100%" >
      <rect x="0" y="0" width="100%" height="100%" />
    <text x="72"  y="50">OUR BLOG</text>
      </mask>
  </defs>
 <rect x="0" y="0" width="100%" height="100%" />
  </svg>
</header>

@font-face {
  font-family: Biko; src:url("https://dl.dropboxusercontent.com/s/drqovvccglsw4ud/RedHatText-Medium.woff");
}
body {
  background: white;
  margin: 2rem;
}
header { 
  width: 100%;
  margin: 0 auto;
  position: relative;
  max-width: 1200px;
}
header video { width: 100%; }
svg { 
  width: 100%;
  position:absolute;
  top: 0;
  left: 0; // needed for FF, Safari, Edge
  height: 100%;
}
svg text {
  font-family: Biko, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 26px;
}
svg rect {
  fill: white;
}
svg > rect {
    -webkit-mask: url(#mask);
    mask: url(#mask);
}

const video = document.querySelector("video");
if (window.matchMedia('(prefers-reduced-motion)').matches) {
  video.removeAttribute("autoplay");
  video.pause();
}