当我们转载文章或者发布文章时经常会需要用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>