眾所周知手機不支持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這里只是提供一個思路。

如果你還有什么不明白的可以聯系我們的在線客服幫你處理。