当前位置：首页-WordPress文章-WordPress-正文

解决网站嵌入优酷视频堆叠顺序的问题

萨龙龙 萨龙龙 WordPress7年前009.30K

解决网站嵌入优酷视频堆叠顺序的问题 - 第1张很多网站都会插入优酷或其它网站的在线视频到自己的网站中，默认情况下优酷视频的堆叠顺序并不受CSS样式z-index属性的影响，在视频页面有滚动、弹窗和浮动的元素就会被视频所遮挡，造成差的浏览体验，那我们就得解决。

使用HTML代码嵌入的优酷视频

通过使用HTML代码embed嵌入的优酷视频我们可以添加在embed标签中添加wmode="opaque"属性，比如默认的视频优酷为：

  1. "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">

添加wmode="opaque"属性的代码为：

  1. "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">

使用HTML代码嵌入的优酷视频

因为获取缩略图要使用到client id，开发的视频主题使用优酷视频云提供的代码，同样也不受CSS样式z-index属性的影响，如果开通了优酷VIP，通过这段代码就能享受很多服务，这样管理也较为方便。
优酷视频云提供的默认代码：

  1. "youkuplayer" style="width:480px;height:400px">
  • "text/javascript" src="http://player.youku.com/jsapi">
  • "text/javascript">
  •     player = new YKU.Player('youkuplayer', {
  •         styleid: '0',
  •         client_id: '替换成优酷视频client id',
  •         vid: '替换成优酷视频ID',
  •         newPlayer: true
  •     });

  • 此时wmode="opaque"代码添加的位置有所不同，我们要添加到JS代码中，同时需要修改成“wmode:'opaque',”，完整的代码如下：

    1. "youkuplayer" style="width:480px;height:400px">
  • "text/javascript" src="http://player.youku.com/jsapi">
  • "text/javascript">
  •     player = new YKU.Player('youkuplayer', {
  •         wmode: 'opaque',
  •         styleid: '0',
  •         client_id: '替换成优酷视频client id',
  •         vid: '替换成优酷视频ID',
  •         newPlayer: true
  •     });

  • [successbox]这样使用HTML代码或优酷视频云提供的代码就完美的解决元素堆叠顺序的问题，现在WP也可以直接输入视频链接，对于这样的嵌入方式有好的解决方法再列举出来。[/successbox]

    优酷视频(2)
    本文原创，作者：萨龙龙，其版权均为4166am金沙信心之选所有。
    如需转载，请注明出处：/youku-wmode-opaque.html
    萨龙龙

    萨龙龙

    侠客

    一个平平常常的人，热爱生活、旅行和摄影，骑行去过西藏，一直计划再去。14年从江西骑行来到大理，现栖居于洱海边，食人间烟火，过简单生活，做简约设计！

    1331.56M122.83W￥1.81W
    \u4f7f\u7528HTML\u4ee3\u7801\u5d4c\u5165\u7684\u4f18\u9177\u89c6\u9891
    \u901a\u8fc7\u4f7f\u2026@\u8428\u9f99\u7f51\u7edc&appkey=746468751&pic=https:\/\/salongweb.com\/wp-content\/uploads\/2016\/06\/youku-z-index.jpg&searchPic=true","qq":"https:\/\/connect.qq.com\/widget\/shareqq\/index.html?url=https:\/\/salongweb.com\/youku-wmode-opaque.html&title=\u89e3\u51b3\u7f51\u7ad9\u5d4c\u5165\u4f18\u9177\u89c6\u9891\u5806\u53e0\u987a\u5e8f\u7684\u95ee\u9898&pics=https:\/\/salongweb.com\/wp-content\/uploads\/2016\/06\/youku-z-index.jpg&summary=\u5f88\u591a\u7f51\u7ad9\u90fd\u4f1a\u63d2\u5165\u4f18\u9177\u6216\u5176\u5b83\u7f51\u7ad9\u7684\u5728\u7ebf\u89c6\u9891\u5230\u81ea\u5df1\u7684\u7f51\u7ad9\u4e2d\uff0c\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u4f18\u9177\u89c6\u9891\u7684\u5806\u53e0\u987a\u5e8f\u5e76\u4e0d\u53d7CSS\u6837\u5f0fz-index\u5c5e\u6027\u7684\u5f71\u54cd\uff0c\u5728\u89c6\u9891\u9875\u9762\u6709\u6eda\u52a8\u3001\u5f39\u7a97\u548c\u6d6e\u52a8\u7684\u5143\u7d20\u5c31\u4f1a\u88ab\u89c6\u9891\u6240\u906e\u6321\uff0c\u9020\u6210\u5dee\u7684\u6d4f\u89c8\u4f53\u9a8c\uff0c\u90a3\u6211\u4eec\u5c31\u5f97\u89e3\u51b3\u3002
    \u4f7f\u7528HTML\u4ee3\u7801\u5d4c\u5165\u7684\u4f18\u9177\u89c6\u9891
    \u901a\u8fc7\u4f7f\u2026&site=\u8428\u9f99\u7f51\u7edc","zone":"https:\/\/sns.qzone.qq.com\/cgi-bin\/qzshare\/cgi_qzshare_onekey?url=https:\/\/salongweb.com\/youku-wmode-opaque.html&title=\u89e3\u51b3\u7f51\u7ad9\u5d4c\u5165\u4f18\u9177\u89c6\u9891\u5806\u53e0\u987a\u5e8f\u7684\u95ee\u9898&desc=\u5f88\u591a\u7f51\u7ad9\u90fd\u4f1a\u63d2\u5165\u4f18\u9177\u6216\u5176\u5b83\u7f51\u7ad9\u7684\u5728\u7ebf\u89c6\u9891\u5230\u81ea\u5df1\u7684\u7f51\u7ad9\u4e2d\uff0c\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u4f18\u9177\u89c6\u9891\u7684\u5806\u53e0\u987a\u5e8f\u5e76\u4e0d\u53d7CSS\u6837\u5f0fz-index\u5c5e\u6027\u7684\u5f71\u54cd\uff0c\u5728\u89c6\u9891\u9875\u9762\u6709\u6eda\u52a8\u3001\u5f39\u7a97\u548c\u6d6e\u52a8\u7684\u5143\u7d20\u5c31\u4f1a\u88ab\u89c6\u9891\u6240\u906e\u6321\uff0c\u9020\u6210\u5dee\u7684\u6d4f\u89c8\u4f53\u9a8c\uff0c\u90a3\u6211\u4eec\u5c31\u5f97\u89e3\u51b3\u3002
    \u4f7f\u7528HTML\u4ee3\u7801\u5d4c\u5165\u7684\u4f18\u9177\u89c6\u9891
    \u901a\u8fc7\u4f7f\u2026&summary=&site=\u8428\u9f99\u7f51\u7edc"}>

    相关文章

    WordPress 主题禁用古滕堡编辑器和小工具

    WordPress4.9.8版本就发布了古滕堡编辑器，很好用，添加文章也比经典编辑器方便很多。在5.8版本后又在小工具中增加了古滕堡编辑器，功能差不多，对于WordPress主题开发者来说，古滕堡小工具的…
    2年前1.17W

    Wordpress MU多站点网络克隆新站点插件Multisite Cloner

    WordpressMU多站点已经使用很久，在本地测试和主机上安装的都是多站点，极大的方便网站搭建以及主题开发。当我们有多个站点，需要创建的新站点数据与已创建的相似，这时我们就需要使用MultisiteCloner…
    8年前1.47W

    CSS3 background-attachment:fixed实现滚动视差效果

    一直都想设计一个有滚动视差效果的主题，而网上所有的介绍和有视差效果的主题都是使用jQuery来实现，而且由于视差背景图是一张满屏的大小，所以一直没有实现这个功能。最近在开发一个摄影/作品展示的主题，使用CSS3ba…
    8年前1.10W

    WordPress按自定义文章类型进行搜索

    一般的Wordpress主题中都有多种自定义文章类型，除了了默认的文章还会有作品、商品等自定义类型的文章，而WordPress默认只能搜索到文章，对于自定义文章类型的文章需要我们进行判断，其实也可以在搜索中添加自定义…
    7年前9.99K