在我的页面上,我嵌入了来自 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 他们删除了 filter 属性。
我遇到过多个建议用于图像并且在图像上具有悬停效果的 fiddle 。
我纯粹是想为我的嵌入式视频添加一个灰度滤镜,没有任何悬停效果,我发现一些 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 解决方案来做同样的事情。
该链接详细解释了该过程,使用 modernizer 检测浏览器等。不过,实现起来需要做很多工作。
关于html - 跨浏览器嵌入式视频灰度过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41142232/