Web中内嵌视频实现响应式效果

---

本文外链视频以优酷和腾讯视频为讲解资源。
当你在web中嵌入外部来的资源时,可以通过iframe来嵌入：

//优酷
（幻城第一集）
<iframe height=498 width=510 src="http://player.youku.com/embed/XMTY1OTM2MjA4NA==" frameborder=0 allowfullscreen></iframe>

//腾讯
（幻城第一集）
<iframe frameborder="0" width="640" height="498" src="http://v.qq.com/iframe/player.html?vid=j0020qc692d&tiny=0&auto=0" allowfullscreen></iframe>

嵌入之后再浏览器中显示：
（优酷）

Paste_Image.png

（腾讯）

Paste_Image.png
细心的你会发现：优酷iframe: width="510" height="498"，腾讯iframe: width="640" height="498",恩？说好的视频资源比例是4:3 或者 16:9, 则么优酷搞个性，不遵循基本法则么？
再细细一量，你会发现：好像错怪了优酷。如果你量下腾讯和优酷的实际有效画面，你会发现，两者比例都接近：16：9。所以各位前端大神么，以后外链插入视频的时候，不能再相信iframe的宽高就是视频的宽高比例了，否则，要么视频画面会被扭曲，要么会出现多余的黑边框。
接下来该进入主题，如何解决页面外链视频的响应式效果了。

响应式的视频

首先我们给包含iframe的div容器中添加一个类名video-container，样式表如下：

.video-container {
  position: relative;  //为了给iframe设置absolute值
  padding-bottom: 56.25%; //以我们实例中:16:9, 如果宽高比是4:3,那就是75%；
  padding-top: 30px; 给视频资源一个空间，上下留点黑白
  height: 0; 因为我们通过padding-bottom来设置高度，所以没必要设置高度。
  overflow: hidden; 确保溢出的内容能够隐藏起来
}

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

效果显示：
（优酷）

Paste_Image.png

（腾讯）

Paste_Image.png
感觉效果还行吧！！！
参考文献：http://www.w3cplus.com/responsive/making-embedded-content-work-in-responsive-design.html