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

cross browser embedded video grayscale filter

在我的页面上,我嵌入了来自 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 exploere 10 他们删除了过滤器 属性。

我遇到过多个建议用于图像的小提琴,它们在图像上有悬停效果。

我纯粹是想为我的嵌入式视频添加一个灰度滤镜,没有任何悬停效果,我发现一些小提琴不适用于嵌入式视频。

非常感谢任何帮助,谢谢

将此用于不同的浏览器

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

那个link详细解释了过程,使用modernizer检测浏览器等等。不过实施起来需要做很多工作。