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

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

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

WordPress 功能函数——absint(将值转换为非负整数)

用法 absint(mixed$maybeint) 将值转换为非负整数。 参数 $maybeint (mixed)(必需)您希望…
萨龙龙萨龙龙
WordPress Functions
7年前
0
0
1.12W
0

萨龙网络集成Buddypress+Bbpress社区论坛功能

前段时间已经发布Purity2.0主题更新的文章,主题已经集成了作品展示、商城,通过半个来月的时间把Buddypress+Bbpress社区论坛…
萨龙龙萨龙龙
Bbpress, Buddypress
10年前
0
0
1.78W
0

WordPress使用WP-Cron函数定时执行任务

WordPress本身一直有WP-Cron(计划任务)的功能,可以设置每隔一段时间来执行,不过WP-Cron功能是基于页面浏览的,所以时…
萨龙龙萨龙龙
WordPress
7年前
0
0
2.14W
0

修改Woocommerce商品固定链接其它自定义文章类型适用

在更新Concise主题时集成了前端用户中心和商城插件,发现插件中为商城产品文章设置好了固定链接,所以把萨龙网络的作品集与商城的两种自定义类型的…
萨龙龙萨龙龙
WooCommerce
10年前
0
0
1.41W
0

WordPress按自定义文章类型进行搜索

一般的Wordpress主题中都有多种自定义文章类型,除了了默认的文章还会有作品、商品等自定义类型的文章,而WordPress默认只能搜索到文章…
萨龙龙萨龙龙
WordPress
9年前
0
0
1.30W
0

WordPress获取不同用户、类型文章和自定义字段下的文章数量

萨龙网络开发的MNews主题中,集成了个人中心功能,需要获取文章、视频、下载、专题和商城的文章数量,这个是比较简单,使用wp_count_p…
萨龙龙萨龙龙
WordPress
7年前
0
0
1.08W
0

WordPress强大的开源后台框架Redux Framework介绍与使用

开发一个WP主题有了前端页面设计的美观与布局外,后台选项也是相当重要的一个组成部分,好的后台框架在使用主题时方便快捷的设置各个功能,也让主题开发…
萨龙龙萨龙龙
WordPress
10年前
0
0
2.37W
0

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

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

WordPress获取优酷视频缩略图

很多网站的视频都是来自在线视频网站,这样即节省网站空间也带来更高的访问速度,优酷视频是使用较多的。在添加视频文章时我们都想直接获取视频中的缩略图…
萨龙龙萨龙龙
WordPress
9年前
0
0
1.27W
0

WordPress添加标签相关文章简码

自从了解到WordpressMU多站点,就开始一步一步的向多站点发展,也将萨龙网络所有站点都安装在WordpressMU多站点中。在使用多站…
萨龙龙萨龙龙
WordPress
10年前
0
0
1.25W
0

CSS3 background-attachment:fixed实现滚动视差效果

一直都想设计一个有滚动视差效果的主题,而网上所有的介绍和有视差效果的主题都是使用jQuery来实现,而且由于视差背景图是一张满屏的大小,所以一直…
萨龙龙萨龙龙
WordPress
10年前
0
0
1.53W
0

WordPress添加 span 标签到分类目录和文章归档文章数量上

WordPress默认提供了分类目录,文章归档等小工具,在前台开发中,由于分类目录和文章归档显示的文章数量没有添加标签,导致写样式比较麻烦,如…
萨龙龙萨龙龙
WordPress
6年前
0
0
1.43W
0
评论表单游客 您好,欢迎参与讨论。
加载中…
评论列表
总数:0
萨龙网络
没有相关内容