<svg viewBox="0 0 600 300" class="svg-defs">

  <!-- Symbol with text -->
  <symbol id="s-text">
    <text text-anchor="middle"
          x="50%"
          y="50%"
          dy=".35em"
          class="text"
          >
      Text
    </text>    
  </symbol>

  <!-- Mask with text -->
  <mask id="m-text"
        maskunits="userSpaceOnUse"
        maskcontentunits="userSpaceOnUse">

    <rect
          width="100%"
          height="100%"
          class="mask__shape">
    </rect>
    <use xlink:href="#s-text"
         class="mask__text"
         ></use>

  </mask>
</svg>

<div class="box-with-text">

  <!-- Container for video -->
  <div class="text-fill">
    <video 
           class="video" src="http://tympanus.net/codrops-playground/assets/images/posts/23145/bokeh2.mp4"
           autoplay loop
           ></video>
  </div>

  <!-- Visible SVG -->
  <svg viewBox="0 0 600 300"
       class="svg-inverted-mask">
    <rect
          width="100%"
          height="100%"
          mask="url(#m-text)"
          class="shape--fill"/>
    <use xlink:href="#s-text"
         class="text--transparent"
         ></use>
  </svg> 
</div>
/* Main styles */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);

.mask__shape {
  fill: white;
}

.shape--fill {
  fill: #000;
}

.text--transparent {
  fill: transparent;
}

.box-with-text {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.text-fill {
  position: absolute;
  top: 50%;
  left: 50%;
  padding-top: 35vw;
  padding-left: 100%;
  margin: auto;
  overflow: hidden;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.video {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

@media (min-aspect-ratio: 1 / 2) {
  .text-fill {
    padding-top: 35vw;
  }
}

@media (min-aspect-ratio: 2 / 1) {
  .text-fill {
    padding-top: 70vh;
    padding-left: 190vh;
  }
}

/* Other styles */
html, body {
  height: 100%;
}

body {
  background: #000000;
  font: 14.5em/1 Open Sans, Impact;
  text-transform: uppercase;
  margin: 0;
}

.svg-defs {
  width: 0;
  height: 0;
}

.svg-inverted-mask {
  position: absolute;
  width: 100%;
  height: 100%;
}