您的浏览器需要启用 JavaScript 才能正常访问此网站。
萨龙网络
登录
首页-WordPress文章-WordPress-正文

解决网站嵌入优酷视频堆叠顺序的问题

萨龙龙萨龙龙WordPress10年前001.38W
解决网站嵌入优酷视频堆叠顺序的问题很多网站都会插入优酷或其它网站的在线视频到自己的网站中,默认情况下优酷视频的堆叠顺序并不受CSS样式z-index属性的影响,在视频页面有滚动、弹窗和浮动的元素就会被视频所遮挡,造成差的浏览体验,那我们就得解决。

使用HTML代码嵌入的优酷视频

通过使用HTML代码embed嵌入的优酷视频我们可以添加在embed标签中添加wmode="opaque"属性,比如默认的视频优酷为:
  1. <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"属性的代码为:
  1. <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,通过这段代码就能享受很多服务,这样管理也较为方便。 优酷视频云提供的默认代码:
  1. <div id="youkuplayer" style="width:480px;height:400px"></div>
  2. <script type="text/javascript" src="http://player.youku.com/jsapi"></script>
  3. <script type="text/javascript">
  4.     player = new YKU.Player('youkuplayer', {
  5.         styleid: '0',
  6.         client_id: '替换成优酷视频client id',
  7.         vid: '替换成优酷视频ID',
  8.         newPlayer: true
  9.     });
  10. </script>
此时wmode="opaque"代码添加的位置有所不同,我们要添加到JS代码中,同时需要修改成“wmode:'opaque',”,完整的代码如下:
  1. <div id="youkuplayer" style="width:480px;height:400px"></div>
  2. <script type="text/javascript" src="http://player.youku.com/jsapi"></script>
  3. <script type="text/javascript">
  4.     player = new YKU.Player('youkuplayer', {
  5.         wmode: 'opaque',
  6.         styleid: '0',
  7.         client_id: '替换成优酷视频client id',
  8.         vid: '替换成优酷视频ID',
  9.         newPlayer: true
  10.     });
  11. </script>
[successbox]这样使用HTML代码或优酷视频云提供的代码就完美的解决元素堆叠顺序的问题,现在WP也可以直接输入视频链接,对于这样的嵌入方式有好的解决方法再列举出来。[/successbox]
标签:
本文原创,作者:萨龙龙,其版权均为萨龙网络所有。
如需转载,请注明出处:https://salongweb.com/youku-wmode-opaque.html
萨龙龙

萨龙龙

侠客
一个平平常常的人,热爱生活、旅行和摄影,骑行去过西藏,一直计划再去。14年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!
1412.39M457.19W4.42W
加载中…
分享:
Wordpress获取优酷视频缩略图
Wordpress获取优酷视频缩略图上一篇
AMH面板安装配置Memcached加速WordPress站点下一篇
AMH面板安装配置Memcached加速WordPress站点
相关文章
总数:114

WordPress 获取用户 ID 的8种方法

在 WordPress 主题的开发过程中,获取用户 ID 的频率是很高的,可在 WordPress 中查看用户信息,也可以通过代码直接获取。 …
萨龙龙萨龙龙WordPress4年前005.15W0

WordPress 主题感染恶意代码function _check_active_widgets

萨龙龙开发主题这么久,第一次感染恶意代码,整个 WordPress 下的主题 functions.php 都被插入了一大段函数代码,百度一下也发…
萨龙龙萨龙龙WordPress8年前001.70W0

WordPress+Nuxt3前后端分离项目,实现不限层级的多维数组菜单

使用 WordPress+Nuxt3做前后端分离项目时,菜单需要多维数组,且不限层级,可以使用递归函数很方便地将 wp_get_nav_menu…
萨龙龙萨龙龙WordPress3年前213.73W0

萨龙网络站点群所有网站使用https访问

HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的…
萨龙龙萨龙龙WordPress10年前001.51W0

WordPress获取多个角色的用户列表并分页

在WordPress按角色获取可分页的用户列表并显示最新文章这篇文章中我们已经介绍了获取单个角色的用户列表,如果想获取多个角色的用户列表呢,ge…
萨龙龙萨龙龙WordPress10年前001.06W0

WordPress 添加菜单项目描述

WordPress 能够在自定义菜单中存储每个菜单项的描述,默认情况下,这些描述不会显示在前端菜单中,需要为相应的菜单增加显示描述的功能。 一…
萨龙龙萨龙龙WordPress7年前001.49W0

禁用 WordPress 裁剪功能包括自动生成的 768 像素图片

WordPress 媒体库是很强大、管理媒体相当方便,如果媒体多就给数据库增加了压力,而且很多媒体是不需要上传到媒体库,上传的图片会增加很多无用…
萨龙龙萨龙龙WordPress8年前001.38W0

WordPress 主题获得评论深度的2种方法

一、通过使用全局变量获取评论深度 我相信您应该知道wp_list_comments()函数,它可以将评论打印在网站页面上。 为什么这个功…
萨龙龙萨龙龙WordPress4年前002.39W0

如何把WordPress数据迁移至WordPress MU

前面我们介绍了如果安装WordPress MU,安装完成后我们就需要把每个独立站点的数据转移到MU中,在MU中最原始的站点数据是不需要改动,只需…
萨龙龙萨龙龙WordPress11年前001.48W0

WordPress 功能函数—— add_comments_page(将子菜单页添加到评论主菜单上)

描述 此函数具有一个功能,该功能将用于确定菜单中是否包含页面。 连接到处理页面输出的函数也必须检查用户是否具有所需的…
萨龙龙萨龙龙WordPress Functions7年前002.14W0

WordPress前台登录函数wp_login_form的用法

网站开放注册的站点都会添加一个前台登录与注册的表单或页面,这样方便用户登录站点,同时也保证网站后台的安全性。今天我们来介绍前台登录函数wp_lo…
萨龙龙萨龙龙WordPress10年前002.01W0

WordPress龙霄加盟推广系统 —— 数据一目了然,结算一步到位:多语言电商推广管理后台

一、开发背景与定位龙霄加盟推广插件(LongXiao Affiliate)是由萨龙网络出品的一款深度 WordPress 电商加盟推广管…
萨龙龙萨龙龙WordPress1个月前005440
评论表单游客 您好,欢迎参与讨论。
加载中…
评论列表
总数:0
萨龙网络
没有相关内容