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%)}

这适用于所有浏览器，但不适用于互联网探索11。

我知道自从互联网爆炸后他们删除了过滤属性。

我遇到过多个针对图片建议的小提琴，并且会对它们产生悬停效果。

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

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

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

cross browser grayscale

该链接详细解释了该过程，使用modernizer来检测浏览器等。尽管如此，还是要做很多工作。

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

1 个答案: