首先，需要在网页模板中增加一段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=“https://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=“https://player.youku.com/embed/XMzAyNzc4ODUyOA==” frameborder=0 allowfullscreen></iframe> </div>

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

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

打赏

扫一扫，打赏作者吧～