视频 iframe 中的模糊元素

【问题标题】：Blur element inside video iframe视频 iframe 中的模糊元素
【发布时间】：2022-01-27 05:09:47
【问题描述】：

我不明白如何模糊视频 iframe 中的元素。具体来说，我想模糊点击视频进度条时弹出的预览图像，如图所示：

使用此代码，整个 iframe 会变得模糊：

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

尝试在 iframe 之后添加 img 和 image 但没有任何反应。所以有人可以给我建议我需要添加什么才能使 iframe 中的这个元素变得模糊。

【问题讨论】：

标签： html css iframe

【解决方案1】：

您可以这样做。如果您希望整个视频模糊，您可以移除悬停效果，并且您还必须根据视频尺寸更改高度和宽度。

#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>

此外，代码运行良好，但您将无法通过在 sn-p 上运行来查看视频预览。所以我附上下面的输出图像：

【讨论】：