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

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 exploere 11.

我知道,因为互联网爆炸10他们删除了过滤属性.

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

我纯粹希望为我的嵌入式视频添加灰度滤镜,而不会有任何悬停效果,而且我发现的一些小提琴不适用于嵌入式视频.

任何帮助都会受到很大关注,谢谢

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解决方案来做同样的事情.

跨浏览器灰度

该链接详细解释了该过程,使用现代化器来检测浏览器等.不过要实现它需要做很多工作.