iframe,object,embed标签嵌入视频后,宽高度自适应的css技巧

有时网站后台发布转载文章，而文章中带有视频，这个视频通常是采用iframe方式嵌入的。如下代码：

<iframe src="视频地址" frameborder="0" allowfullscreen="true"></iframe>

如果在发布时清除了原来的格式，那么这个嵌入的视频也随之变得很小。如下图。

下面这个方法，经过测试是可行的。

把以下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%;
}

然后在发布文章时，切换至html标签，在视频标签，iframe,或object,或embed的上级html标签中（对比上面的css文件层级），加入class="video"即可。例如，上级标签是<p>：

<p class="video"><iframe src="视频地址" frameborder="0" allowfullscreen="true"></iframe></p>

刷新网站的样式文件及页面，发现变了！