如何让iframe,object,embed标签完美自适应视频宽度高度？

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

<iframe src="https://www.xxx.com" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

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

那么到底有没有比较简单快捷的方法，让iframe嵌入的视频宽度和高度，达到一个正常的，或适应当前页面宽度高度的方法呢？

答案是有的。

有人说手动去html里设置增加iframe标签的宽度和高度，但人是懒惰的，不想总是这样操作。

有人说可以用css来设置其宽度和高度为100%或其它数字，可是博主实践过，宽度是可以自适应，能看到变化，可是高度怎么设置也不会变，如果宽度是100%而高度没有变化，那么视频在页面中就被拉扯变形了，这不就是反向调整优化吗！

有人说用javascript来进行控制，但是为什么要把简单的事情复杂化呢？

重点来了，下面这个方法，只用几行css样式就能够实现自适应，我们先来看下css样式代码，复制下面的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”：

<p class="video">
  <iframe src="https://www.xxx.com" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</p>

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

视频嵌入已经实现了宽高自适应！！！

虽然这样每次发布带视频的内容时，还是需要去写个class=”video”，但比写死高度和宽度而造成响应式的网站，移动端视频就只能看到某一部分了要好很多。

成功实践后再回头看看起作用的css，那个padding-bottom为何是56.25%这个数字还是让小伙伴们懵圈，如果你把它去掉或改成其他数字，你会看到明显的高度变化。这是什么css计算原理在起作用呢？

十万个为什么？别问了，毕竟我也只是个小白，能解决问题就行！。

补充：如果内容页是全宽，如达到1920像素，那么视频的宽度也就随之变大，但视频实际尺寸只有1200像素，这明显超过视频原有尺寸，这时候画面就会变得失真模糊，那么这种情况下我们就要对video样式加以修改调整，具体调整如下:

.video {
  position: relative;
  padding-bottom: 36.25%;
  height: 0;
  overflow: hidden;
  max-width: 640px;
  max-height: 360px;
  margin: 0 auto;
}

对比之前的样式，这里修改padding-bottom为36.25%,margin:0 auto则是让视频的位置居中对齐，同时新增加max-width值为640px，max-height的值为360px。

本文链接：http://so.lmcjl.com/news/607/