zblogPHP模板在插入優酷等第三方視頻的時候，一般使用框架iframe或者embed，但現有的優酷 愛奇藝等網站的分享代碼，其中都有高寬限制，插入網頁后，在PC端內容區寬度足夠是正常顯示的，但在手機移動端訪問的時候，就會出現視頻顯示不全，過大的情況！

下面分享一個解決優酷視頻自適應的問題：

<iframe width="510" height="498" src="http://player.youku.com/embed/XMjc2Mjg1NDU4OA==" frameborder="0"></iframe>

代碼中一般都有寬高

方法一：

每次插入視頻代碼的時候，都手動刪除掉其中的width和height，然后通過CSS去定義iframe的寬和高，包括手機端的！

這種方法每次必須要刪除寬高，可以用，但不如方法二。

方法二：

通過jquery移除width（寬度） height（高度）

//視頻自適應
    function video_ok(){
        $('.article-content embed, .article-content video, .article-content iframe').each(function(){
            var w = $(this).attr('width'),
                h = $(this).attr('height')
            if( h ){
                $(this).css('height', $(this).width()/(w/h))
            }
        })
    }

然后再通過CSS去寫寬高：

<style>
.page-view-article-content embed, .page-view-article-content video, .page-view-article-content iframe{width: 510px;height: 498px;}/*PC上正常顯示寬度*/
@media screen and (max-width:980px){ /*寬度低于980px時候執行*/
.page-view-article-content embed, .page-view-article-content video, .page-view-article-content iframe{max-width: 100%;height: 200px;}/*寬度低于980px時候，iframe寬度100%，高度200px*/
}
</style>

如此，即可解決！