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

发布时间：2023-11-10 15:50:27 所属栏目：经验来源：

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

众所周知手机不支持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这里只是提供一个思路。

如果你还有什么不明白的可以联系我们的在线客服帮你处理。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!