很多网站都会插入优酷或其它网站的在线视频到自己的网站中,默认情况下优酷视频的堆叠顺序并不受CSS样式z-index属性的影响,在视频页面有滚动、弹窗和浮动的元素就会被视频所遮挡,造成差的浏览体验,那我们就得解决。
使用HTML代码嵌入的优酷视频
通过使用HTML代码embed嵌入的优酷视频我们可以添加在embed标签中添加wmode="opaque"属性,比如默认的视频优酷为:
- <embed src="http://player.youku.com/player.php/sid/XMTM1NjAxNDg3Mg==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
添加wmode="opaque"属性的代码为:
- <embed wmode="opaque" src="http://player.youku.com/player.php/sid/XMTM1NjAxNDg3Mg==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
使用HTML代码嵌入的优酷视频
因为获取缩略图要使用到client id,开发的视频主题使用优酷视频云提供的代码,同样也不受CSS样式z-index属性的影响,如果开通了优酷VIP,通过这段代码就能享受很多服务,这样管理也较为方便。
优酷视频云提供的默认代码:
- <div id="youkuplayer" style="width:480px;height:400px"></div>
- <script type="text/javascript" src="http://player.youku.com/jsapi"></script>
- <script type="text/javascript">
- player = new YKU.Player('youkuplayer', {
- styleid: '0',
- client_id: '替换成优酷视频client id',
- vid: '替换成优酷视频ID',
- newPlayer: true
- });
- </script>
此时wmode="opaque"代码添加的位置有所不同,我们要添加到JS代码中,同时需要修改成“wmode:'opaque',”,完整的代码如下:
- <div id="youkuplayer" style="width:480px;height:400px"></div>
- <script type="text/javascript" src="http://player.youku.com/jsapi"></script>
- <script type="text/javascript">
- player = new YKU.Player('youkuplayer', {
- wmode: 'opaque',
- styleid: '0',
- client_id: '替换成优酷视频client id',
- vid: '替换成优酷视频ID',
- newPlayer: true
- });
- </script>
[successbox]这样使用HTML代码或优酷视频云提供的代码就完美的解决元素堆叠顺序的问题,现在WP也可以直接输入视频链接,对于这样的嵌入方式有好的解决方法再列举出来。[/successbox]本文原创,作者:萨龙龙,其版权均为萨龙网络所有。
如需转载,请注明出处:https://salongweb.com/youku-wmode-opaque.html
一个平平常常的人,热爱生活、旅行和摄影,骑行去过西藏,一直计划再去。14年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!在 WordPress 主题的开发过程中,获取用户 ID 的频率是很高的,可在 WordPress 中查看用户信息,也可以通过代码直接获取。
…萨龙龙开发主题这么久,第一次感染恶意代码,整个 WordPress 下的主题 functions.php 都被插入了一大段函数代码,百度一下也发…使用 WordPress+Nuxt3做前后端分离项目时,菜单需要多维数组,且不限层级,可以使用递归函数很方便地将 wp_get_nav_menu…HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的…在WordPress按角色获取可分页的用户列表并显示最新文章这篇文章中我们已经介绍了获取单个角色的用户列表,如果想获取多个角色的用户列表呢,ge…WordPress 能够在自定义菜单中存储每个菜单项的描述,默认情况下,这些描述不会显示在前端菜单中,需要为相应的菜单增加显示描述的功能。
一…WordPress 媒体库是很强大、管理媒体相当方便,如果媒体多就给数据库增加了压力,而且很多媒体是不需要上传到媒体库,上传的图片会增加很多无用…一、通过使用全局变量获取评论深度
我相信您应该知道wp_list_comments()函数,它可以将评论打印在网站页面上。
为什么这个功…前面我们介绍了如果安装WordPress MU,安装完成后我们就需要把每个独立站点的数据转移到MU中,在MU中最原始的站点数据是不需要改动,只需…描述
此函数具有一个功能,该功能将用于确定菜单中是否包含页面。
连接到处理页面输出的函数也必须检查用户是否具有所需的…网站开放注册的站点都会添加一个前台登录与注册的表单或页面,这样方便用户登录站点,同时也保证网站后台的安全性。今天我们来介绍前台登录函数wp_lo…一、开发背景与定位龙霄加盟推广插件(LongXiao Affiliate)是由萨龙网络出品的一款深度 WordPress 电商加盟推广管…