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

On my page I am embedding a video from vimeo as so

在我的页面上，我嵌入了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>

For the css I have

对于css我有。

iframe {filter: grayscale(100%)}

This is working in all browsers but not internet exploere 11.

这是在所有浏览器中工作，但不是在互联网上爆炸。

I am aware that since internet exploere 10 they removed the filter property.

我知道自从互联网爆炸10，他们删除过滤器属性。

I have come across multiple fiddles that are suggested for images and that have hover effects over them.

我遇到过很多提示图片的小技巧，它们有悬停效果。

I am purely looking to add a greyscale filter to my embedded videos without any hover effects and some of the fiddles I found wont work with embedded video.

我纯粹是想给我的嵌入式视频添加一个灰度过滤器，没有任何悬停效果，而且我发现有些小技巧不能用于嵌入式视频。

any help would be greatly appriciated, Thanks

任何帮助都将非常昂贵，谢谢

1 个解决方案

#1

use this for different browsers

对于不同的浏览器使用这个

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

now test in IE11.

现在在IE11测试。

if IE 11 doesn't support css filters, you have to use a javascript solution to do the same thing.

如果IE 11不支持css过滤器，你必须使用javascript解决方案来做同样的事情。

cross browser grayscale

跨浏览器灰度

That link explains the process in detail, using modernizer to detect browsers and so on. It'd be a lot of work to implement though.

该链接详细解释了这个过程，使用modernizer检测浏览器等等。不过，要实现这一点还需要大量的工作。

#1