'Blur element inside video iframe

i cant understand how to blur elements inside video iframe. Specifically i want to blur preview image which pop up when clicking on video progress bar like in picture:
enter image description here

With this code the whole iframe blurs :

iframe {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

Tried to add img and image after iframe but nothing happened. So can someone please give advice what do i need to add to make only this element inside iframe to blur.

htmlcssiframe


Solution 1:[1]

Here is how you can do it. You ca remove the hover effect if you want the video blur throughout and you also have to change the height and width according to your video dimensions.

#filter-blur {
  -webkit-filter: blur(5px);
  filter: url(#blur-effect-1);
}

#filter-blur:hover {
  -webkit-filter: blur(0px);
}
<iframe id="filter-blur" src="https://www.youtube.com/embed/cmVdgWL5548" height="315" width="560" frameborder="0"></iframe>

<svg id="svg-image-blur">
    <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="2" />
    </filter>
</svg>

Also the code is working fine but you will not be able to see video preview by running on snippet. So I am attaching an image of the output below :

Output

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 joxing

Related Questions