优酷视频自适应屏幕的方法

将优酷视频嵌入网站时需要指定长和宽的像素,这对手机等终端十分不友好,可以用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>


即可自适应屏幕尺寸

关键词: iframe