zblogphp自适应模板插入优酷视频，电脑与移动手机端都正常显示方法

在使用zblogphp的时候，可能偶尔需要插入优酷等网站视频，一般PC上播放视频是没有什么问题的，不管是插入视频的flash网址、通用网址，还是html代码都可以，因为电脑上一般都有flash插件！

而在移动端手机上，必须插入通用代码，也就是iframe代码，框架就不需要使用设备自带flash插件就可播放，所以为了PC和手机端都可以正常播放，最好的办法就是使用通用代码！

问题来了：通用代码PC上显示正常，手机端的尺寸有问题，视频太宽以至于显示不全！

问题原因：如上图，通用代码里默认使用了height=498 width=510的高和宽固定尺寸，这时候视频的尺寸优先执行iframe里的高宽，导致PC正常，手机端视频溢出！

解决办法：

首先，使用通用代码的时候，复制代码后，要去除代码中的高宽属性，直接删除height=498 width=510，此时视频默认使用最小窗口，但都不是最佳尺寸。

使用CSS进行调整：

比如：

.article-content iframe{width: 510px; height: 498px;}@media screen and (max-width: 980px) {    .article-content iframe{width: 100%; height:inherit;}}

.article-content是文章内容区域父元素，iframe就是视频框架的意思，在正常情况下，也就是PC上这个框架显示宽度510px和高度498px。

下一句当屏幕宽度低于980px像素时候，执行这个视频框架为宽度100%，就是在屏幕低于980px的移动设备上，此时视频窗口为100%宽度，符合手机端显示要求。

优化后电脑PC端效果：

手机端效果：