很多网站都会插入优酷或其它网站的在线视频到自己的网站中，默认情况下优酷视频的堆叠顺序并不受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年从江西骑行来到大理，现栖居于洱海边，食人间烟火，过简单生活，做简约设计！MNews 和 LensNews 主题都有前台投稿的功能，用户可以上传图片等文件，管理员是不希望用户上传任意的媒体文件，这时我们可以对用户上传的…Wordpress MU多站点已经使用很久，在本地测试和主机上安装的都是多站点，极大的方便网站搭建以及主题开发。当我们有多个站点，需要创建的新站…强大、实用的Redux框架我们已经在WordPress强大的开源后台框架Redux Framework介绍与使用一文中介绍了，今天我们介绍下如何…上一篇文章我们介绍了Isotope，功能强大，效果出众的jQuery插件，但是文章中的代码并不能使用在项目中，所以今天通过Wordpress主题…基于 DeepSeek 大模型，为龙霄主题深度集成 AI 智能翻译引擎。在 WordPress 后台一键完成 Polylang 字符串、页面、文…使用 WordPress+Nuxt3做前后端分离项目时，菜单需要多维数组，且不限层级，可以使用递归函数很方便地将 wp_get_nav_menu…描述
此函数具有一个功能，该功能将用于确定菜单中是否包含页面。
连接到处理页面输出的函数也必须检查用户是否具有所需的…经常折腾wp的人肯定不止一个博客，主题高产的WPER那就更不用说，所以我们不想重复地安装wordpress，通过WordPress MU只需要安…Codestar Framework，一个轻量且易用的 WordPress 选项框架，在萨龙龙最新设计开发的企业教育培训类 WordPress …自动获取照片的EXIF信息，很多大型的摄影论坛都有这个功能，对于摄影爱好者来说是一个很实用的功能。萨龙龙开发的Deephoto主题和Neatim…描述
WordPress核心执行期间，在特定点执行时或特定事件发生时，Actions是钩子。插件可以指定使用Action API在…Wordpress获取分类文章的函数有query_posts和WP_Query，两个函数的功能都很强大，推荐使用WP_Query函数来查询文章。…
