纯css实现iframe高度自适应

当我们转载文章或者发布文章时经常会需要用iframe标签引入视频或者网页，但是用iframe标签引入视频最大的一个问题就是无法自适应高度，宽度不是什么大问题，只有我们在iframe标签中加入width="100%"就可以啦，但是高度写100%是不生效的只能写死，但是这就造成了iframe高度无法自适应，比如在电脑上能正常显示，手机上就无法正常显示，哪么有什么办法可以设置iframe高度自适应呢？
其实很简单，并不用像网上说的那样，用js去监听浏览器高度纯css就可以实现iframe高度自适应
纯css实现iframe高度自适应代码如下

 <style type="text/css">
  .video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<p class="video">
  <iframe id="iFrame" name="iframe1" class="flexiframe" src="www.xxx.com/123.mp4" style="width:100%;" marginwidth="0" frameborder="no" scrolling="no" ></iframe>
</p>