萨龙网络
登录
首页-WordPress文章-WordPress-正文

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

萨龙龙萨龙龙
WordPress
10年前
0
0
1.36W
解决网站嵌入优酷视频堆叠顺序的问题很多网站都会插入优酷或其它网站的在线视频到自己的网站中,默认情况下优酷视频的堆叠顺序并不受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年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!
1352.35M457.14W4.42W
加载中…
分享:
Wordpress获取优酷视频缩略图
Wordpress获取优酷视频缩略图上一篇
AMH面板安装配置Memcached加速WordPress站点下一篇
AMH面板安装配置Memcached加速WordPress站点
相关文章
总数:108

WordPress 主题 Slearn Pro 产品插件之属性设置

产品属性可在后台「产品——产品选项——属性」中单独设置(也可在编辑产品时再次添加),有三种类型:文本、颜色和图片,在前台也是以这三种方式来显示。…
萨龙龙萨龙龙
WordPress
3年前
0
0
2.58W
0

WordPress 媒体库支持 SVG 图标的上传与预览

WordPress默认支持多种图片格式包括.jpg,.jpeg,.png,和.gif,出于安全考虑不能上传可缩放矢量图形(SVG)。SVG是…
萨龙龙萨龙龙
WordPress
7年前
0
0
1.28W
0

WooCommerce为购物车和结算添加附加费 – 使用费用API

为所有交易添加基于百分比的附加费 /** *添加1%的附加费到你的购物车和结算页面 *更改百分比以将附加费设置为适合的…
萨龙龙萨龙龙
WooCommerce
6年前
0
0
1.19W
0

WordPress 文章查询类 WP_Query 如何获取序列化数组中的文章

还是在开发导航类主题Slhao的时候遇到的问题,主题使用CodestarFramework专业版选项框架,文章的Metabox选项…
萨龙龙萨龙龙
WordPress
7年前
0
0
1.28W
0

移除 WooCommerce 商城插件编辑产品中的产品数据相关 tabs

WooCommerce插件默认为编辑产品页面提供了产品数据TABS,默认包括:常规、库存、配送、联锁产品、属性、高级等模块,功能强大而实用。…
萨龙龙萨龙龙
WooCommerce
8年前
0
0
1.38W
0

WordPress 自定义的评论查询类 WP_Comment_Query 参考文档和使用实例

WordPress获取评论所有主题都是使用wp_list_comments()函数,获取每篇文章的评论是相当的方便实用,唯一的不足是不能通过自…
萨龙龙萨龙龙
WordPress
7年前
0
0
1.79W
0

在WooCommerce中添加“立即购买”按钮直接跳转到结算页面

MNews主题集成了WooCommerce商城插件,有些用户要求增加一个『立即购买』按钮,这篇文章介绍下如何在WooCommerce中添加…
萨龙龙萨龙龙
WooCommerce
8年前
0
0
3.20W
0

自定义WooCommerce产品文章hook顺序

最近在做一款企业产品展示的商城网站,设计WooCommerce产品文章的布局与默认的布局有很大的不同,所以其中的一些模块都需要重新调整。WooC…
萨龙龙萨龙龙
WooCommerce
9年前
0
0
1.50W
0

WordPress 获取用户 ID 的8种方法

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

修改Buddypress中管理员的显示名与用户名区别开提高账户安全

Buddypress社区中有很多地方会直接显示用户登录名,比如用户个人主题中的名称和链接中,所有来访的用户都知道了管理员的用户名,对于小人知道了…
萨龙龙萨龙龙
Buddypress, WordPress
10年前
0
0
1.70W
0

WordPress 重置缩略图插件 Regenerate Thumbnails 获取媒体数量时错误的解决方法

WordPress一键重置缩略图使用相当简单方便,设置了媒体中要裁剪的缩略图参数(使用了WooCommerce商城插件,需要在外观——自定…
萨龙龙萨龙龙
WordPress
7年前
0
0
1.10W
0

WordPress 主题禁用古滕堡编辑器和小工具

WordPress4.9.8版本就发布了古滕堡编辑器,很好用,添加文章也比经典编辑器方便很多。在5.8版本后又在小工具中增加了古滕堡编辑…
萨龙龙萨龙龙
WordPress
4年前
0
0
1.57W
0
评论表单游客 您好,欢迎参与讨论。
加载中…
评论列表
总数:0
萨龙网络
没有相关内容