终于解决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%。这样就实现了优酷视频自动版网页的自适应。

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

鼓励作者,打赏 1元 后再查看此处内容!立即支付

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

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

打赏

5条评论

  • qyuky 2018年3月19日 回复

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

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

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

      • qyuky 2018年3月19日 回复

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

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

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

          • qyuky 2018年3月20日

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

发表回复

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