div中全屏视频bg的行为就像div一样是alpha吗？

Question

我在这里要做的效果是将一个主要的全屏视频作为背景，最重要的是我希望有一个居中的div，让它看起来像背景视频被这个div模糊了，为了做到这一点，我试图使用另一个版本的预模糊和bg视频的顶部，但我只希望这个视频在div所在的位置可见，并且div动态独立于背景，所以就像div是模糊视频的alpha通道一样，希望这是有道理的。

这是我正在尝试的外观的图像：

这是迄今为止我所拥有的jsfiddle： 的 JSFIDDLE

。:: CODE ::。

HTML：

<div id="wrapper">
  <div id="main"></div>
</div>

<video autoplay loop muted id="bgvid">
    <source src="http://www.patan77.com/screenshot/test_bg_vid.mp4" type="video/mp4">
</video>

<video autoplay loop muted id="bgvid_blur">
    <source src="http://www.patan77.com/screenshot/test_bg_vid_blur.mp4" type="video/mp4">
</video>

CSS：

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%);

}

更新

使用剪辑路径进行实验，它更接近我想要的（但仍然不是真的），但注意到另一个问题视频（模糊和不模糊的版本）不同步播放，并且不知道我怎么会确保他们总是同步，该死的结果比我最初认为的要难得多。

JSFIDDLE_v02