将优酷视频嵌入网站时需要指定长和宽的像素,这对手机等终端十分不友好,可以用javascript让优酷的视频自适应屏幕。
<iframe height=498 width=510 src="http://player.youku.com/embed/XODA2NDM4OTI0" frameborder=0 allowfullscreen></iframe>以上为一段优酷提供的视频,需要指定长和宽,其实,我们可以用javascript获取屏幕的宽度,再乘以相应的比率,从而让视频自适应屏幕大小。
先给iframe制定一个id video 然后加入以下代码:
<script>
window.onresize=Init;
function Init(){
document.getElementById("video").width=""+document.body.clientWidth*0.8+"";
document.getElementById("video").height=""+document.body.clientWidth*0.45+"";
}
</script>
即可自适应屏幕尺寸