Fullscreen video bg in div that behaves like the div is its alpha?
<p>The effect I'm going for here is to have a main full-screen video as the background and on top of that I want to have a div that centered and have it look like the background video gets blurred by this div, and to do this I'm trying to use another version of the video that is pre-blurred and on-top of the bg video but I only want this video to be visible where the div is, and the div is moving dynamically independent of the background, so would be like the div were the alpha channel for the blurred video, hopes this makes sense.</p>

<p>Here an image of the look I'm trying for:
<a href="https://i.stack.imgur.com/KxaDm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KxaDm.jpg" alt="enter image description here"></a></p>

<p>and here is as jsfiddle of what I have so far:
<strong><a href="https://jsfiddle.net/04mx0guv/" rel="nofollow noreferrer">JSFIDDLE</a></strong></p>

<p><strong><em>.::CODE::.</em></strong></p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;div id="wrapper"&gt;
  &lt;div id="main"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;video autoplay loop muted id="bgvid"&gt;
    &lt;source src="http://www.patan77.com/screenshot/test_bg_vid.mp4" type="video/mp4"&gt;
&lt;/video&gt;

&lt;video autoplay loop muted id="bgvid_blur"&gt;
    &lt;source src="http://www.patan77.com/screenshot/test_bg_vid_blur.mp4" type="video/mp4"&gt;
&lt;/video&gt;
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>body { margin: 0; padding: 0; }

#main{
  position:absolute;
    width: 100%;
    height: 500px;
   background: rgba(0, 0, 0, .25);
    margin: auto;
    top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

}

video#bgvid_blur { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -99;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

}
</code></pre>

<p><strong>UPDATE:</strong></p>

<p>Experimented with clip path a bit, and its closer to what I want (but still not really), but noticed another problem the videos (blur and the not blurred version) don't play in sync, and don't know how I would make sure they are always in sync, damn this turned out to be a bit harder then I initially thought it would be.</p>

<p><strong><a href="https://jsfiddle.net/04mx0guv/1/" rel="nofollow noreferrer">JSFIDDLE_v02</a></strong></p>