有时网站后台发布转载文章，而文章中带有视频，这个视频通常是采用iframe方式嵌入的。如下代码：
<iframe src=”https://v.qq.com/iframe/player.html?vid=v06363imof8&tiny=0&auto=0″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>
如果在发布时清除了原来的格式，那么这个嵌入的视频也随之变得很小。如下图。
这么小，自然是观感不太好。有没有比较简单快捷的方法，让iframe嵌入的视频宽度和高度，达到一个正常的，或适应当前页面宽度高度的方法呢？
一是手动去html里设置增加iframe标签的宽度和高度，但人是懒惰的，不想总是这样操作。
二是可以用css来设置其宽度和高度为100%或其他数字，可是华哥实践过，宽度是可以自适应，能看到变化，可是高度怎么设置也不会变，如果宽度是100%而高度没有变化，那这个视频在页面中就被拉扯变形了。观感更糟！
三是看到网上说用javascript来进行控制，只是看上去实现方式与代码都很复杂，没有勇气去尝试。
四是下面这个方法。经过测试是可行的。
把以下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=”https://v.qq.com/iframe/player.html?vid=v06363imof8&tiny=0&auto=0″ frameborder=”0” allowfullscreen=”allowfullscreen“></iframe></p>
刷新网站的样式文件及页面，发现变了！
实际效果可参见学而行营销网这篇：东方卫视「24节气」公益宣传片
虽然发布带视频的内容时，还是需要去html代码中做一下手脚，写个class＝xx，但比写死高度和宽度（网站是响应式的，那移动端如果固定的话，视频就只能看到某一部分了）要好很多。
成功实践后再回头起作用的css，那个padding-bottom为何是56.25%这个数字还是让哥懵圈，如果你把它去掉或改成其他数字，你会看到明显的高度变化。这是什么css计算原理在起作用呢？
十万个为什么？别问了，能解决问题就行，一切都是拿来主义。
