剪辑路径未呈现

Question

我正在尝试将图像叠加到视频上，但剪切该图像使其不会越过视频帧的边缘。我正在使用的剪辑路径似乎不起作用。

.clipped {  

  position: absolute; 
  clip-path: rectangle(0, 792, 480, 0);
}
<div style="position: relative;">

  <!-- Background wrapper: -->
  <div style="position: absolute; z-index: 1; left: 0; top: 0;">
    <!-- All background content goes here... -->
    <video style="cursor: crosshair" width="792" height="480" autoplay="autoplay" loop>
  <source src="http://cdn.ultrasoundoftheweek.com/post_files/uotw16.1.mp4" type="video/mp4">
</video>
  </div>

  <!-- Content wrapper; all original content goes inside of this div: -->
  <div style="position: relative; z-index: 2;">
    <!-- Begin content block -->

   <img class="clipped" src="http://ultrasoundoftheweek.com/uploader/grid_inside.png" astyle="width:1300px;height:1300px">
    <!-- End content block -->
  </div>

</div> 

JSfiddle