很多网站都会插入优酷或其它网站的在线视频到自己的网站中，默认情况下优酷视频的堆叠顺序并不受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按角色获取可分页的用户列表并显示最新文章这篇文章中我们已经介绍了获取单个角色的用户列表，如果想获取多个角色的用户列表呢，ge…WordPress 4.9.8 版本就发布了古滕堡编辑器，很好用，添加文章也比经典编辑器方便很多。在 5.8 版本后又在小工具中增加了古滕堡编辑…Gutenberg，WordPress 最新的编辑器，每个模块都是一个 blocks 的形式。默认的编辑文章页面是支持 Gutenberg 编辑…一、通过使用全局变量获取评论深度
我相信您应该知道wp_list_comments()函数，它可以将评论打印在网站页面上。
为什么这个功…WooCommerce 在每个页面上加载三个核心CSS样式表，并在WordPress站点上安装时发布。可以通过从不需要它的页面和内容中删除样式和…Redis是一个开源、支持网络、基于内存的key-value存储系统，类似memcached，性能极高，支持超过100K+ 每秒的读写频率，一些…前言在数字化商业生态中，联盟营销（Affiliate Marketing）已成为品牌方拓展销售渠道、降低获客成本的核心手段。一套完整的加…默认情况下，WordPress允许用户通过后台管理面板编辑主题和插件代码。虽然它是一个方便的功能，但对于主题或插件作者没有任何用途，最重要可以防…WooCommerce 插件默认为编辑产品页面提供了产品数据 TABS，默认包括：常规、库存、配送、联锁产品、属性、高级等模块，功能强大而实用。…HTTPS（全称：Hyper Text Transfer Protocol over Secure Socket Layer），是以安全为目标的…WordPress MU虽然是一个程序下可以创建多个站点，但每个站点下的文章、页面、媒体等还是独立的，MU也为不同的站点分配了不同的媒体目录。N…网上已经有很多介绍 WordPress 多语言的插件了，比如 Polylang 和 WPML 等强大的多语言插件，但是只是介绍，很快都是能掌握怎…
