终于解决wordpress插入的优酷视频手机端无法播放的问题

首先,需要在网页模板中增加一段js代码。这个动作也可以在网页加载的最开始做。对于WordPress网站,这段代码可以增加到主题的footer.php的合适位置,代码如下:

<script> vd = document.getElementById(“youku”); if (vd != null) { vd.style.height = vd.scrollWidth*0.6+“px”; } </script>

这段代码的意思很简单,就是找到id为youku的元素,让后将其高设置为宽的60%。这样就实现了优酷视频自动版网页的自适应。

然后,复制优酷视频的通用代码,如下:

<iframe height=498 width=510 src=“http://player.youku.com/embed/XMzAyNzc4ODUyOA==” frameborder=0 allowfullscreen></iframe>

视频代码需修改一下,修改完如下:

<div style=“text-align:center;”> <iframe id=“youku” style=“width:96%” height=498 width=510 src=“http://player.youku.com/embed/XMzAyNzc4ODUyOA==” frameborder=0 allowfullscreen></iframe> </div>

对比一下,可以看出,代码的修改很简单。先对整个iframe实现居中,然后给iframe增加一个id,值为youku,同时给iframe一个width属性值,这是一个百分比,表示占用页面的宽度。

可以测试一下阿柯发布的视频链接页面:http://kzyblog.com/3496.html

打赏

5 条评论

  • qyuky 2018 年 3 月 19 日 回复

    按照你的这个方法,把优酷的视频入到文章里去,然后在电脑端是正常的,但是在手机上播放器的界面就没有你的处理这那么好看了。还不知道是什么原因,有空再研究研究~

    • 阿柯 2018 年 3 月 19 日 回复 作者

      噢,是不是视频比例设置问题?

      • qyuky 2018 年 3 月 19 日 回复

        比例设置过了,电脑网页上没问题,手机的比例,高度总是很高。

        • 阿柯 2018 年 3 月 20 日 回复 作者

          你对比一下我日志的代码,播放代码有差异吗?我的好像只改一个比例和加一个居中。

          • qyuky 2018 年 3 月 20 日

            先不管它了,有空再研究。能用就行,哈哈哈

发表评论

电子邮件地址不会被公开。 必填项已用*标注