实施手机移动端网站优酷视频自适应的方法

发布时间：2022-01-09 11:03 所属栏目：19 来源：互联网

导读：众所周知手机不支持SWF文件播放，在手机端，尤其在微信端更是如此，在这样的情况下，我们一般会选择使用iframe嵌套代码来实现视频的调用。随便网页的智能化的发展，我们也不可避免的需要让我们的站点实现基础的自适应的小智能。那就是361源码今天准备给大家

众所周知手机不支持SWF文件播放，在手机端，尤其在微信端更是如此，在这样的情况下，我们一般会选择使用iframe嵌套代码来实现视频的调用。随便网页的智能化的发展，我们也不可避免的需要让我们的站点实现基础的自适应的小“智能”。那就是361源码今天准备给大家讲的：手机移动端网站优酷视频自适应的实现方法。

一、正文页没有侧边栏的情况，一般视频考虑按照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源码来分析吧，361这里只是提供一个思路。

（编辑：ASP站长网）