zblog使用iframe框架插入优酷等视频，手机端自适应宽度方法

温馨提示：手机扫码可阅读当前文章!
文章简介：在使用ZblogPHP模板插入优酷等第三方视频时，一般会使用iframe或embed框。然而，目前优酷、爱奇艺等视频分享代码中都包含宽高限制，导致在PC端内容区宽度足够时可以正常显示，但在手机移动端访问时会出现视频显示不全、过大等问题。下面...

在使用ZblogPHP模板插入优酷等第三方视频时，一般会使用iframe或embed框。然而，目前优酷、爱奇艺等视频分享代码中都包含宽高限制，导致在PC端内容区宽度足够时可以正常显示，但在手机移动端访问时会出现视频显示不全、过大等问题。

下面分享一个解决优酷视频自适应问题的方法：

<iframe src="http://player.youku.com/embed/XMjc2Mjg1NDU4OA==" frameborder="0" allowfullscreen></iframe>

在代码中一般会包含宽度和高度。

方法一：每次插入视频代码时，都手动删除其中的width和height属性，并通过CSS来定义iframe的宽度和高度，包括在手机端的情况下。

这种方法需要每次手动删除宽度和高度属性，可以使用，但不如方法二方便。

方法二：通过jQuery移除width和height属性，使其自适应。

// 移除宽度和高度属性
$('iframe').removeAttr('width').removeAttr('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))
            }
        })
    }

<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>