title: How to blur a specific region of a HTML5 video tag?
body: <p>For a VueJS Project, I have a video player with HTML5 <code>&lt;video&gt;</code> tag. In this video, I want to display some blurring spots on the bottom left corner.</p>
  <p>I am using a canvas, pure CSS method, and none of that worked.</p>
  <p>In CSS: I used a filter: blur(20px) on a div in front of the video and it doesn't work, the blur affects the border of the div and not the center.</p>
  <p><a href="https://i.stack.imgur.com/rCGvK.png" rel="nofollow noreferrer">Image with blur test in css</a></p>
  <p>With canvas, we try the same and I never get any single blur effect on it</p>
  <p>I just need blur effect on the red part of the images :</p>
  <p><a href="https://i.stack.imgur.com/CcV4l.jpg" rel="nofollow noreferrer">The red part need to be blurred</a></p>
  <pre><code>&lt;template&gt;
  &lt;div&gt;  
    &lt;div class=&quot;contenant&quot;&gt;
      &lt;input  type='range' v-model=&quot;width&quot; min=&quot;0&quot; max=&quot;1281&quot; value=&quot;0&quot; &gt;
      &lt;img id='image' class=&quot;img&quot; src=&quot;image1.jpg&quot; alt=&quot;test&quot;&gt;
      &lt;div id='filtre' v-bind:style=&quot;{ width: width + 'px'}&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'HelloWorld',
    props: {
      width: 0,
    }
  }
  &lt;/script&gt;
  
  &lt;!-- Add &quot;scoped&quot; attribute to limit CSS to this component only --&gt;
  &lt;style scoped&gt;
  .contenant {
    width: fit-content;
  }
  
  #filtre {
    height: 96%;
    background-color: red;
    position: absolute;
    bottom: 0;
    opacity: 0.33;
    top: 8px;
    z-index: 2;
    filter: blur(50px);
  }
  
  .img{
    position:relative;
  }
  
  input[type=range] {
    width: 81%;
    -webkit-appearance: none;
    margin: 10px 0;
    position: absolute;
    z-index: 3;
    height: -webkit-fill-available;
    background-color: transparent;
  }
  
  input[type=range]::-webkit-slider-thumb {
    height: 26px;
    width: 26px;
    border-radius: 17px;
    background: #619BFF;
    cursor: pointer;
    -webkit-appearance: none;
  }
  </code></pre>