SVG mask + video

index.html

<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920px" height="1080px" 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="960" y="1em">Hello</text>
      <text x="960" y="90%">SVG</text>
    </mask>
  </defs>
  <rect x="0" y="0" width="100%" height="100%"/>
</svg>
<!--
<video id="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 style='background-color:black;height:1080px;'></div>
<div style='background-color:red;height:1080px;'></div>

script.js

style.css

html{
    height: 100%;
    overflow:hidden;
    font-weight:100;
}
body {
    font-family: 'Roboto', sans-serif;
    font-size: 35em;
    letter-spacing:-0.03em;
    height: 100%;
}
svg {
    width: 100%;
    height: 100%;
    position:absolute;
}
svg text {
    text-anchor: middle;
}
svg mask rect {
    fill: rgba(255, 255, 255, 0.9);
}
svg > rect {
    fill: white;
    -webkit-mask: url(#mask);
    mask: url(#mask);
}
video{
  position: absolute;
  top: 0%;
  left: 0%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  overflow: hidden;
}

@media only screen and (max-width: 768px) {
  html{
    font-size:0.5em;
    font-weight:400;
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

SVG mask + video.markdown