手机移动端网页引用优酷视频时自适应解决方案

作为一个个人站长,有时候在发表文章时候难免会要引入视频,但是视频既占用主机空间,又占用带宽流量,所以,我们小站长一般会引入各大视频网站的资源。

youtube采用的是html5格式的播放器,不过遗憾的是youtube被墙了,无法引用,所以还得引用国内的视频网站,但目前国内的视频网站都还是采用的swf格式的播放器,这就造成一个很大问题,直接用swf引用代码的话,在手机端,尤其是微信端,并不支持swf的播放插件,只能用iframe代码引用优酷的播放网页。

在html5+css3盛行的年代,自适应网站逐步占领主流,如果用iframe代码,不可避免要解决自适应的难题,通过博主的摸索(主要是从网上抄的~),解决方案如下:

第一种情况:你的网站正文宽度就是浏览器宽度的时候(换句话说就是正文页没有侧边栏的情况)

一般视频考虑按照16:9的比例来说设定,代码如下:

<script>

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;//设定高度

}

}

</script> 

<iframe width=100% src="视频地址" frameborder=0 allowfullscreen></iframe>

第二种情况:网页正文带侧边栏(就是博主这种)

解决代码如下:

<iframe width=100% height=350 src="视频地址" frameborder=0 allowfullscreen></iframe>

原因分析:

如果有侧边栏的时候,用script代码,他识别的是body的宽度,这时候如果在电脑端,会显得视频上下很宽。当然了这里限定好高度为350的时候,也会在手机端显得上下有黑边,只能看自己取舍了。

展示效果:http://www.lyusa.cn/feel/33.html

PS:

实际测试上面方法并不完美,提供完美解决思路:在iframe外面镶套两层DIV,然后用CSS中的判断页面像素值代码来设定不DIV的高度,具体代码操作,你可以看我的源码和CSS源码来分析吧,我只是提供一个思路。

bnans

发表评论

站长选项