CSS使iframe自适应

发表于 | 更新于 | 分类于
默认的iframe不会自适应高度，观感不好。一些视频外链等也不行，通过CSS可以使其自适应大小。

默认的iframe不会自适应高度，观感不好。一些视频外链等也不行，通过CSS可以使其自适应大小。

在分享bilibili视频的时候发现iframe不能被完美地展示，如下图中的第一个视频会不能自适应大小，观感并不好，我们想要实现第二个视频的效果。

刚开始，试图通过修改iframe标签的width和height样式为100%来实现，但是发现只有宽度可以自适应，高度并不可以，观感更为糟糕。

于是搜索了一些资料，发现有很多方法，如js获取子页面加载完成时的框架大小后赋给框架样式的高度样式，或者子页面和父页面的传值，但这些并不适用于视频嵌套这种情况。CSS控制父标签应该是最适宜这种情况的了。

例子

需要把<iframe>嵌套进一个<div>或者其他，代码如下：

1
2
3
<div class="video-container">
	<iframe src="//player.bilibili.com/player.html?aid=30160448&cid=52769924&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.video-container {
	position: relative;
	overflow: hidden;
	padding-top: 30px;
	padding-bottom: 56.25%;
	height: 0
}

video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

如此只要在嵌套视频时在<iframe>外面加上一层标签并使其class="video-container"，即可达到上图第二个视频的效果。