跨浏览器嵌入式视频灰度滤镜

Question

在我的网页上，我要嵌入来自vimeo的视频，如下所示：

<h4>Favopurite songs</h4>
<ul>
    <li>
        <a href="https://player.vimeo.com/video/9159308?autoplay=1" target="vimeoPlayer">
            Three little birds
        </a>
    <li>
</ul>

<section id="player">
    <iframe class="first" src="#" name="vimeoPlayer" width="200" height="150"
frameborder="1" webkitallowfullscreen mozallowfullscreen allowfullscreen>
    </iframe>
</section>

对于CSS，我有以下内容：

iframe {filter: grayscale(100%)}

这在所有浏览器中都可以工作，但不包括Internet Explorer 11。

我知道自Internet Explorer 10开始，他们删除了filter属性。

我遇到了多个建议用于图像且具有悬停效果的小贴士。

我只是想为我的嵌入式视频添加灰度滤镜，没有任何悬停效果，而我发现的一些小贴士无法与嵌入式视频配合使用。

任何帮助将不胜感激，谢谢。

- Mark

---

IE不支持filter - 4castle

Answer 1

在不同的浏览器中使用此代码

iframe{
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   filter: grayscale(100%);
}

现在测试在IE11中。

如果IE 11不支持CSS过滤器，您必须使用JavaScript解决方案来完成相同的事情。

跨浏览器灰度

该链接详细解释了该过程，使用Modernizer检测浏览器等。不过，实现起来需要很多工作。

- Milan Gajjar