很多网站都会插入优酷或其它网站的在线视频到自己的网站中，默认情况下优酷视频的堆叠顺序并不受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年从江西骑行来到大理，现栖居于洱海边，食人间烟火，过简单生活，做简约设计！还是在开发导航类主题Slhao的时候遇到的问题，主题使用CodestarFramework专业版选项框架，文章的Metabox选项…为所有交易添加基于百分比的附加费
/**
*添加1%的附加费到你的购物车和结算页面
*更改百分比以将附加费设置为适合的…最近在开发Perimg图片主题，用户想要用Timthumb.php插件来实现缩略图，缩略图的顺序是自定义域、文章第一张图片与默认缩略图，而萨龙龙…用法
absint(mixed$maybeint)
将值转换为非负整数。
参数
$maybeint
(mixed)(必需)您希望…在更新Concise主题时集成了前端用户中心和商城插件，发现插件中为商城产品文章设置好了固定链接，所以把萨龙网络的作品集与商城的两种自定义类型的…萨龙网络已经开发了很多WordPress主题，LensNews主题要创建的页面较多，所以导致很多用户来咨询如何设置用户中心，在最新上线的…WordPress默认提供了分类目录，文章归档等小工具，在前台开发中，由于分类目录和文章归档显示的文章数量没有添加标签，导致写样式比较麻烦，如…WooCommerce在每个页面上加载三个核心CSS样式表，并在WordPress站点上安装时发布。可以通过从不需要它的页面和内容中删除样式和…Wordpress的菜单都是通过后台菜单来添加设置，很多时候需要添加一些功能到菜单，比如搜索，或者购物车，这时我们就可以使用wp_nav_men…很多个人博客都有一个小工具是来统计网站的一些信息，Deephoto主题企业版本首页就集成了网站统计，添加了工作天数、完成作品、新闻动态、摄影师、…WooCommerce后台对管理员的通知『连接您的店铺到WooCommerce.com接受扩展更新和支持』，是3.3.1版本后出来了，新的…相信使用Wordpress的朋友都对WP-PageNavi分页插件不陌生，很多博客对它也有很多介绍，之前也使用过代码来实现分页，但不够人性化，使…
