您当前的位置:主页 > 教程合集 > Html/css网站利发国际Html/css

移动站上引用优酷视频时候自适应的解决方法

发布时间:2017-09-25编辑:余斗阅读:(0)字号:
    我们在表文章时候难免会要引入视频,但是视频文件本身会很大,既占用主机空间,又占用带宽流量,所以,我们小站长一般会选择引入各大视频网站的资源。 目前主流的视频网站无非国内的优酷、腾讯视频,国外的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源码来分析吧,我只是提供一个思路。
关键字词自适应 移动站 优酷视频
余斗余斗
  1. 转载请注明: 移动站上引用优酷视频时候自适应的解决方法_余斗余斗_利发国际
  2. 版权声明: 本站原创文章,由 发表在 Html/css 分类下,于2017-09-25最后更新
上一篇:table表格自适应高度的解决办法 下一篇:没有了
table表格自适应高度的解决办法
没有了
手机扫一扫 随身带着看

利发国际

百度360搜索搜狗搜索