今天一个客户在编辑器里自己插入一个优酷的视频，发现PC端是很完美的，因为他自己设置了宽 和高，但在移动端发现下面空了很大一段。

然后希望我帮他看看如何解决这个问题，这个其实就是一个自适应的问题，因为你把视频的高度固定死后，在不同的浏览器肯定是有问题，只能通过修改css来调整。

下面是自适应css代码：

<style>
  .ycnhwl {
    position:relative;
    padding-bottom:45%;  /*可以适当修改*/
    height:0;
    overflow:hidden;
}
.ycnhwl iframe,.ycnhwl object,.ycnhwl embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
</style>

引用视频有两种方式

1、在模板上固定位置引用：这种直接在模板上写好代码，首先在后台自定义多行的字段，比如 ：shipin ，用于写iframe的代码，代码里要把width 和height的值删除

<div class="ycnhwl">
{$eyou.field.shipin|htmlspecialchars_decode=###}
</div>

写好后每次要更新或者增加视频 只需要在后台字段里写iframe的代码即可。

2、在编辑器里插入，一般是和文章的内容混合插入。

<p class="ycnhwl"> 
<iframe src="iframe的代码内容" frameborder="0" scrolling="no"  allowfullscreen=""></iframe></p>

同样不要写width 和height的值哦，很重要，写了就又固定死了。

以上是修改后自适应效果。分享代码，供大家参考！