很多网站都会插入优酷或其它网站的在线视频到自己的网站中，默认情况下优酷视频的堆叠顺序并不受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默认支持多种图片格式包括.jpg，.jpeg，.png，和.gif，出于安全考虑不能上传可缩放矢量图形（SVG）。SVG是…为所有交易添加基于百分比的附加费
/**
*添加1%的附加费到你的购物车和结算页面
*更改百分比以将附加费设置为适合的…还是在开发导航类主题Slhao的时候遇到的问题，主题使用CodestarFramework专业版选项框架，文章的Metabox选项…WooCommerce插件默认为编辑产品页面提供了产品数据TABS，默认包括：常规、库存、配送、联锁产品、属性、高级等模块，功能强大而实用。…WordPress获取评论所有主题都是使用wp_list_comments()函数，获取每篇文章的评论是相当的方便实用，唯一的不足是不能通过自…MNews主题集成了WooCommerce商城插件，有些用户要求增加一个『立即购买』按钮，这篇文章介绍下如何在WooCommerce中添加…最近在做一款企业产品展示的商城网站，设计WooCommerce产品文章的布局与默认的布局有很大的不同，所以其中的一些模块都需要重新调整。WooC…在WordPress主题的开发过程中，获取用户ID的频率是很高的，可在WordPress中查看用户信息，也可以通过代码直接获取。
…Buddypress社区中有很多地方会直接显示用户登录名，比如用户个人主题中的名称和链接中，所有来访的用户都知道了管理员的用户名，对于小人知道了…WordPress一键重置缩略图使用相当简单方便，设置了媒体中要裁剪的缩略图参数（使用了WooCommerce商城插件，需要在外观——自定…WordPress4.9.8版本就发布了古滕堡编辑器，很好用，添加文章也比经典编辑器方便很多。在5.8版本后又在小工具中增加了古滕堡编辑…
