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

标记

在我的页面上,我也嵌入了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探索10以来,他们删除了filter属性。

我碰到过许多建议用于图像的小提琴,它们对它们具有悬停效果。

我纯粹是在为嵌入式视频添加灰度滤镜,而没有任何悬停效果,我发现有些小玩意儿无法用于嵌入式视频。

任何帮助将不胜感激,谢谢

米兰·加杰尔

用于不同的浏览器

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解决方案来执行相同的操作。

跨浏览器灰度

该链接详细说明了此过程,使用现代化工具检测浏览器等。但是要实现它需要做很多工作。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

为什么嵌入式YouTube视频在Google Chrome浏览器中停止运行?

YouTube嵌入式视频不适用于Chrome浏览器

SSH:X转发浏览器的嵌入式视频时,CPU使用率超高

如何从嵌入式pdf与浏览器进行通信

嵌入式浏览器中对Google的OAuth请求

JSF创建嵌套的嵌入式浏览器

如何设置Silverlight浏览器应用程序与嵌入式Web浏览器控件之间的通信

在Excel Javascript API中创建嵌入式Web浏览器或iframe

如何在Google Chrome浏览器的嵌入式Javascript中设置断点?

启动嵌入式 Tomcat 并从命令行打开浏览器

在嵌入式Vue应用中操纵浏览器网址

无法在iPhone上的Facebook嵌入式浏览器中加载CSS

浏览器何时在嵌入式元素中呈现空格?

如何为Chromium嵌入式浏览器的不同实例设置不同的Cookie

哪个嵌入式浏览器显示广告网站?

没有浏览器的嵌入式设备上的 MS Graph API 身份验证

使用Javascript,HTML5,AngularJS从浏览器打印嵌入式PDF

嵌入式 IE 浏览器:如何在导航完成前检测重定向?

我们如何在浏览器中缓存嵌入式SVG?

在浏览器中以猫鼬显示嵌入式文档数据模型

我想在React中的网页中使用嵌入式浏览器

嵌入式 JS (ejs) 不会向浏览器呈现数据

iPhone浏览器中的嵌入式Twitter时间轴溢出问题

带有嵌入式脚本的SVG,可扩展到浏览器的可用空间

Exponare 5.6缩放和平移在嵌入式浏览器中不再起作用

SVG嵌入式图像仅在浏览器中显示

支持嵌入式终端跨平台的编辑器?

如何在移动浏览器的嵌入式Vimeo播放器上显示全屏按钮?

嵌入式视频播放器隐藏网站菜单