JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

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

<div class="demo">
  <svg height="0" width="0">

    <clipPath id="SVGID_2_">
      <path id="SVGID_3_" d="M770.5,483c3.1,12.8-2.2,30.7-11.8,39.7L498,770c-9.5,9.1-27.7,13.4-40.3,9.7L113.2,677.5
            c-12.6-3.7-25.4-17.3-28.5-30L0.9,298c-3.1-12.8,2.2-30.7,11.8-39.7L273.4,11C282.9,2,301-2.4,313.6,1.3l344.5,102.1
            c12.6,3.7,25.4,17.3,28.5,30L770.5,483z" />
    </clipPath>
  </svg>

CSS

.svg-clipped-text {
    -webkit-clip-path: url(#SVGID_2_);
    clip-path: url(#SVGID_2_);
}