html5移动端引入优酷视频iframe自适应

重点是 使得 iframe 的宽高比为 9:16 就好

1、要引入的视频

1
<iframe height=498 width=510 src="http://player.youku.com/embed/XMTI4MjU5OTA3Mg==" frameborder=0 allowfullscreen></iframe>

2、css里设置iframe的宽度为100%

3、根据屏幕宽度自适应,这里我设定视频16/9的固定比例

1
2
3
4
5
6
7
window.onload = window.onresize = function () { resizeIframe(); } 
var resizeIframe = function () {
var bodyw=document.body.clientWidth;
for (var ilength=0;ilength<=document.getElementsByTagName("iframe").length;ilength++) {
document.getElementsByTagName("iframe")[ilength].height = bodyw*9/16;//设定高度
}
}

优酷视频