zblogPHP插入优酷（iframe框架）等视频，手机端自适应宽度方法

《zblogPHP插入优酷（iframe框架）等视频，手机端自适应宽度方法》正文开始，本次阅读大概1分钟。

zblogPHP模板在插入优酷等第三方视频的时候，一般使用框架iframe或者embed，但现有的优酷爱奇艺等网站的分享代码，其中都有高宽限制，插入网页后，在PC端内容区宽度足够是正常显示的，但在手机移动端访问的时候，就会出现视频显示不全，过大的情况！

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

iframewidth=510height=498src=http://player.youku.com/embed/XMjc2Mjg1NDU4OA==frameborder=0/iframe

代码中一般都有宽高

方法一：

每次插入视频代码的时候，都手动删除掉其中的width和height，然后通过CSS去定义iframe的宽和高，包括手机端的！

这种方法每次必须要删除宽高，可以用，但不如方法二。

方法二：

通过jquery移除width（宽度）height（高度）

//视频自适应
functionvideo_ok(){
$(.article-contentembed,.article-contentvideo,.article-contentiframe).each(function(){
varw=$(this).attr(width),
h=$(this).attr(height)
if(h){
$(this).css(height,$(this).width()/(w/h))
}
})
}

然后再通过CSS去写宽高：

style
.page-view-article-contentembed,.page-view-article-contentvideo,.page-view-article-contentiframe{width:510px;height:498px;}/*PC上正常显示宽度*/
@mediascreenand(max-width:980px){/*宽度低于980px时候执行*/
.page-view-article-contentembed,.page-view-article-contentvideo,.page-view-article-contentiframe{max-width:100%;height:200px;}/*宽度低于980px时候，iframe宽度100%，高度200px*/
}
/style

如此，即可解决！