很多网站都会插入优酷或其它网站的在线视频到自己的网站中，默认情况下优酷视频的堆叠顺序并不受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管理员忘记密码或需要重置用户密码时，可以使用wp_set_password函数来实现。该函数将为指定用户设置新密码，…在开发MNews主题的快讯功能时，希望一天内发布的快讯文章在当天日期下，而不是每篇都显示一个日期，通过the_date()函数可完美的达到这…在Wordpress主题开发的过程中，尤其是CMS主题分类的布局，通过后台选项（萨龙龙使用的都是Redux开源框架）选择分类，前台通过调用分类的…当出现"Allowedmemorysizeof134217728bytesexhausted"错误时，意味着PHP内存限制被…在WordPress中，我们可以通过向主题中添加CSS文件来为页面和文章添加样式。但是，如果您希望根据文章类型添加自定义样式，该怎么办呢…网站开放注册的站点都会添加一个前台登录与注册的表单或页面，这样方便用户登录站点，同时也保证网站后台的安全性。今天我们来介绍前台登录函数wp_lo…WordPressMU虽然是一个程序下可以创建多个站点，但每个站点下的文章、页面、媒体等还是独立的，MU也为不同的站点分配了不同的媒体目录。N…WordPress4.9.8版本就发布了古滕堡编辑器，很好用，添加文章也比经典编辑器方便很多。在5.8版本后又在小工具中增加了古滕堡编辑…MNews和LensNews主题都有前台投稿的功能，用户可以上传图片等文件，管理员是不希望用户上传任意的媒体文件，这时我们可以对用户上传的…在更新Concise主题时集成了前端用户中心和商城插件，发现插件中为商城产品文章设置好了固定链接，所以把萨龙网络的作品集与商城的两种自定义类型的…为了提高网站的访问速度，萨龙网络也将所有的媒体文件放置在二级域名下，WordPress3.5以上的版本，隐藏了后台的媒体（Media）设置页面…Ubermenu是一个用户友好的、可高度定制响应式的Wordpress超级大菜单插件，工作原理与Wordpress3菜单系统类似，强大到可创建…
