wordpress页面嵌入腾讯、优酷等视频网站的通用iframe代码,该怎样控制播放器的高度?

直接在页面粘贴iframe代码的话,很难做到同时兼容电脑与手机屏幕。手机还好说,主要是电脑端,播放器高度变得很小,简直没法直视。

好在wordpress编辑器内可以直接写js代码。于是有如下代码可以解决问题:


<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=t3234gc4j8c" allowfullscreen="true" id="video" width="100%"></iframe>
<script type="text/javascript">document.getElementById("video").style.height=document.getElementById("video").scrollWidth*0.5625+"px"</script>


代码里0.5625是屏幕宽高比9:16的意思。如果你希望改成其他的比例,直接换算并替换一下即可。

发表评论

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