title: Make a div translucent on top of a video running in background
body: <p>I'm running a video in the background of my homepage using the following code:</p>
  
  <pre><code> &lt;video autoplay poster="videos/test.png" id="bgvid" muted&gt;
          &lt;source src="videos/test.webm" type="video/webm"&gt;
          &lt;source src="videos/test.ogv" type="video/ogv"&gt;
          &lt;source src="videos/test.mp4" type="video/mp4"&gt;
   &lt;/video&gt;
  </code></pre>
  
  <p>And I have a div on top of it, which I'm trying to make it translucent while blurring the video behind it (same effect as in the following image)</p>
  
  <p><img src="https://i.stack.imgur.com/7soUe.png" alt="enter image description here"></p>
  
  <p>I've searched a lot on how to do it, some people suggested using css filters like: blur(5px). I've tried them but I'm not getting results like in the above picture.</p>
  
  <p>Then I found a really cool library called blur.js (<a href="http://blurjs.com/" rel="nofollow noreferrer">http://blurjs.com/</a>); however, it's not working with the video in background, but only when I have a still image as a background.</p>
  
  <p>Any ideas on how to achieve this effect with a video running in background?</p>