本文外链视频以优酷和腾讯视频为讲解资源。
当你在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
