SVG video mask on text

index.html

<div class="wrapper">
	<video autoplay playsinline muted loop preload poster="http://i.imgur.com/xHO6DbC.png">
    <source src="http://mazwai.com/system/posts/videos/000/000/148/preview_mp4/kenji_kawasawa-106_balloons.mp4?1419192915" />
	</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">Simon</text>
      </mask>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" />
  </svg>
</div>

script.js

// Nope

style.scss

.wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: 1000px;
	
  video {
    width: 100%; 
  }
  
  svg { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    text {
      font-family: 'Montserrat', sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      font-size: 40px;
    }
    
    > rect {
      -webkit-mask: url(#mask);
      mask: url(#mask);
    }
    
    rect {
      fill: #fff;
    }
  }
}

// codepen config
body {
  margin: 60px 50px 0;
}

.wrapper {
	&:before,
	&:after {
		content: '';
		position: absolute;
		top: 0;
		width: 10px;
		height: 100%;
		background-color: #fff;
	}
	
	&:before {
		left: -9px;
	}
	
	&:after {
		right: -5px;
	}
}

svg-video-mask-on-text.markdown

SVG video mask on text

SVG video mask on text

A Pen by Simon Evans on CodePen.

License.