<button type="button">Play</button>

<video loop width="852" height="480"  class="svg-clipped-text">
  <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323909/bouncyballs.mp4" type="video/mp4" autoplay="true">
</video>

<svg height="0" width="0">
  <clipPath id="svgTextPath">
     <text x="20" y="200" textLength="800px" lengthAdjust="spacing" font-family="Luckiest Guy" font-size="210px">
       BOUNCE
     </text>
   </clipPath>
</svg>
<br />
<a href="https://sarasoueidan.com/blog/css-svg-clipping/" title="Sara Soueidan is a freelance front-end Web developer, author and speaker from Lebanon." >Sara Soueidan's Excellent SVG Clipping Article</a>
<p>Safari/Edge/IE no joy :(</p>

video{
  display:block;
  margin:20px auto;
}
.svg-clipped-text {
    -webkit-clip-path: url(#svgTextPath);
    clip-path: url(#svgTextPath);
}

button{
  display:block;
  margin: 15px auto;
  padding: 10px 30px;
  border-radius: 25px;
  font-size: 20px;
}

/*text{
  text-shadow: 10px 10px 10px rgba(0,0,0,0.3);
  /* Only works in chrome :( 
}*/

a{
  display:block;
  text-align:center;
  margin-top: -200px;
}
p{
  text-align:center;
}

// https://sarasoueidan.com/blog/css-svg-clipping/
// Bouncy balls video from shutterstock

const vid = document.getElementsByTagName('VIDEO')[0];
const button = document.getElementsByTagName('BUTTON')[0];

button.addEventListener('click', () => vid.play());

//vid.play();