很多网站都会插入优酷或其它网站的在线视频到自己的网站中，默认情况下优酷视频的堆叠顺序并不受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自定义的强大不言而喻,很多主题都在使用,也为其创建了可视化的选项面板,用户使用都相当的直观、方便。萨龙网络新开发的LensNe…描述
激活多个插件。
当WP_Error返回，但这并不意味着该插件的一个有错误。这意味着一个或多个插件文件路径无效。…萨龙网络所有主题都集成了很多优化功能，在 WordPress 更新至5.0版本后，古腾堡(Gutenberg)编辑器发布与更新文章/页面就出现错…在Wordpress主题开发的过程中，尤其是CMS主题分类的布局，通过后台选项（萨龙龙使用的都是Redux开源框架）选择分类，前台通过调用分类的…HTTPS（全称：Hyper Text Transfer Protocol over Secure Socket Layer），是以安全为目标的…描述
添加斜杠以转义字符串。
如果设置了magic_quotes_gpc，将首先删除斜杠。
用法
…很多个人博客都有一个小工具是来统计网站的一些信息，Deephoto主题企业版本首页就集成了网站统计，添加了工作天数、完成作品、新闻动态、摄影师、…萨龙网络使用Buddypress社区已经很长一段时间，在社区首页动态中可能获取整个网站的最新文章、用户注册，用户动态内容，而自定义文章类型的发布…课程插件功能已经能满足绝大多数在线教育培训课程网站的需求，选项功能也众多，「即将推出」功能还在开发中。WordPress 媒体库是很强大、管理媒体相当方便，如果媒体多就给数据库增加了压力，而且很多媒体是不需要上传到媒体库，上传的图片会增加很多无用…基于 DeepSeek 大模型，为龙霄主题深度集成 AI 智能翻译引擎。在 WordPress 后台一键完成 Polylang 字符串、页面、文…
