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

在我的页面上，我也嵌入了来自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 exploere 11。

我知道，自从Internet探索10以来，他们删除了filter属性。

我碰到过许多建议用于图像的 fiddle ，它们对它们具有悬停效果。

我纯粹是在为嵌入式视频添加灰度滤镜，而没有任何悬停效果，我发现有些小玩意儿无法用于嵌入式视频。

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

最佳答案

用于不同的浏览器

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解决方案来执行相同的操作。

cross browser grayscale

该链接详细说明了此过程，使用现代化工具检测浏览器等。但是要实现它需要做很多工作。