JSFiddle - React, Tailwind, and code Playground

by Mitch Greer

HTML

<link rel="stylesheet" href="http://vjs.zencdn.net/4.3/video-js.css">
<script src="http://vjs.zencdn.net/4.3/video.js"></script>
<body>
    
<!--VideoJS linked to default video for placeholder -->
    
    <div id="videoDiv">
      <video id="example_video_1" class="video-js vjs-default-skin" autoplay controls preload="none" width="900" height="600"
          poster="http://video-js.zencoder.com/oceans-clip.png"
          data-setup="{}">
        <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
        <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
        <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
        <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
        <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
      </video>
    </div>

<!--End Video JS-->    

<!--SVG Mask, code output from Adobe Illustrator -->
    
    <div id="wrapper">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="900px" height="600px" viewBox="0 0 900 600" enable-background="new 0 0 900 600" xml:space="preserve">
        <g>
            <path stroke="#FFFFFF" stroke-miterlimit="10" d="M0,0v600h900V0H0z M316.549,351.231h-30.796v-92.803l-23.729,92.803h-27.875
                l-23.685-92.803v92.803h-30.796V229.542h49.452l19.07,74.043l18.936-74.043h49.422V351.231z M421.439,351.231l-6.088-20.088h-42.69
                l-5.932,20.088h-38.394l45.737-121.689h41.017l45.727,121.689H421.439z M570.138,333.218c-4.316,6.586-10.349,11.58-18.096,14.983
                c-7.748,3.403-17.515,5.105-29.302,5.105c-20.697,0-35.029-3.984-42.998-11.953s-12.479-18.096-13.53-30.381l35.776-2.241
               ...

CSS

#wrapper { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    z-index: 5;
}

#videoDiv {
    position: absolute;
    z-index: -5; 
}