title: Getting a full-screen HTML5 Video Background Blur to work?
body: <p>I've seemed to try all the tricks in the book here, and nothing's working.</p>
  
  <p>I have a full-screen, absolute positioned HTML5 video background that I need to blur. However, I'd like it to have sharp edges.</p>
  
  <p>I've tried around 20 or 30 various solutions online so far, and nothing has seemed to work.</p>
  
  <p>Here's what I've tried:</p>
  
  <p>-Setting negative margins</p>
  
  <p>-Setting negative top, left, right, bottom margins</p>
  
  <p>-Setting positive margins in a container with overflow hidden</p>
  
  <p>-Setting in a container with overflow hidden</p>
  
  <p>-Methods noted here: <a href="https://stackoverflow.com/questions/12224320/defined-edges-with-css3-filter-blur">Defined Edges With CSS3 Filter Blur</a> - <a href="https://stackoverflow.com/questions/12224320/defined-edges-with-css3-filter-blur">Defined Edges With CSS3 Filter Blur</a> - <a href="https://stackoverflow.com/questions/20443283/css-blur-and-retain-sharp-edges-using-absolute-div">CSS blur and retain sharp edges using absolute div</a> - <a href="https://stackoverflow.com/questions/20493552/blur-absolute-background-whilst-retaining-solid-edges">Blur absolute background whilst retaining solid edges</a> - <a href="http://volkerotto.net/2014/07/03/css-background-image-blur-without-blury-edges/" rel="noreferrer">http://volkerotto.net/2014/07/03/css-background-image-blur-without-blury-edges/</a></p>
  
  <p>Here's the code so far:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;video id="videobcg" preload="auto" autoplay="true" loop="loop"     muted="muted" volume="0"&gt;
  &lt;source src="vid/myVid.mp4" type="video/mp4"&gt;
  &lt;source src="vid/myVid.webm" type="video/webm"&gt;
      Sorry, your browser does not support HTML5 video.
  &lt;/video&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#videobcg {
      position: absolute;
      top: 0;
      left: 0;
      min-width: 100% !important;
      max-height: 100% !important;
      z-index: -1000;
      overflow: hidden;
      object-fit: fill;
      -webkit-filter: blur(15px);
      -moz-filter: blur(15px);
      -o-filter: blur(15px);
      -ms-filter: blur(15px);
      filter: blur(15px);
  }
  </code></pre>
  
  <p>Maybe I've done something totally wrong, I'm not quite sure. Is there anything I'm doing that's preventing it from working?</p>
  
  <p>Thanks in advance for any help!</p>