我们在表文章时候难免会要引入视频，但是视频文件本身会很大，既占用主机空间，又占用带宽流量，所以，我们小站长一般会选择引入各大视频网站的资源。
目前主流的视频网站无非国内的优酷、腾讯视频，国外的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>
这里的视频地址一般格式为：http://player.youku.com/embed/XNDAyOTc1NDk2
原因分析：
如果有侧边栏的时候，用script代码，他识别的是body的宽度，这时候如果在电脑端，会显得视频上下很宽。当然了这里限定好高度为350的时候，也会在手机端显得上下有黑边，只能看自己取舍了。
小贴士：
实际测试上面方法并不完美，提供完美解决思路：在iframe外面镶套两层DIV，然后用CSS中的判断页面像素值代码来设定不DIV的高度，具体代码操作，你可以看我的源码和CSS源码来分析吧，我只是提供一个思路。
套路很深，不支持下载！
