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

这篇文章主要为大家详细介绍了实现手机移动端网站优酷视频自适应的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

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

一、正文页没有侧边栏的情况，一般视频考虑按照16:9的比例来说设定，代码如下：

二、网页正文带侧边栏，一般解决代码如下：

这里的视频地址一般格式为：http://player.youku.com/embed/XNDAyOTc1NDk2

原因分析：

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

言外语 ：

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

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

以上就是实现手机移动端网站优酷视频自适应的方法的全部内容，希望对大家的学习和解决疑问有所帮助，也希望大家多多支持错新网。