title: Clip-path not working on videos
body: <p>I have been trying to display an image and on hover, a video would start replacing the image, I used Javascript for the hover functions.</p>
  
  <p>I did this using "poster" in the video tag like this:`</p>
  
  <pre><code>&lt;div class="video"&gt;
  
      &lt;video id="videotest" poster="images/img.jpg"&gt;
          &lt;source src="images/bkg.mp4" type="video/mp4"&gt;&lt;/source&gt;
          Can't use videos here.
      &lt;/video&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>However, I would like the video to be the same size as the image. The video is 1280*720, and the image is 677-611.
  I tried to use clip-path to adapt the video but it doesn't work, here is my CSS:</p>
  
  <pre><code>.video {
      text-align:center;
      margin:0 auto;
      height:auto;
      clip-path:inset(0 978px 611px 301px);
      -webkit-clip-path:inset(0 978px 611px 301px);
  }
  </code></pre>
  
  <p>I tried applying this style to .video, #videotest and source, it still didn't work as expected.</p>
  
  <p>Is it impossible to use clip-path with videos in HTML5? If so, how can I do it, and if not, how can I make it work?</p>
  
  <p>I will explain myself a little more:
  I don't want the image to resize, keeping proportions or not, I just would like to cut off, for example, some pixels left and right, so the image in poster is exactly the same size as the video replacing it. Clip-path seemed to correspond to what I was looking for, but I can't get it to work.</p>
  
  <p>Thanks.</p>