在平时写页面的时候，经常会遇到一种情况就是要在页面中插入一个视频或者是图片，当然，对应的方法有许多！
就拿插入视频来说，平时我们会使用video标签直接进行插入，但是video标签在低帮本的IE浏览器中无法支持，显然，这样是不合适的，还有就是使用Flash 但是IOS又是不支持的，所以现在我想说的是，使用iframe !
当你在Web中嵌入外部来的资源时，可以通过iframe:
<iframe src="http:baidu.com" height="90" width="160" allowfullscreen="" frameborder="0"></iframe>
iframe可以将嵌入的外部资源可以在你的网站中显示出来，因为它包含了一个指向内容来源的网址。你可以发现，在iframe中包含了width和height属性。移除这两个属性，iframe会不显示，因为他不会有尺寸。而且非常的遗憾，我们无法通过CSS来解决这个问题。
width属性意味着，当屏幕小于560px的时候，嵌入的内容会超出容器，将打破整个布局。
为了能让嵌入的视频在Web中实现响应式效果，你需要在iframe标签外添加一个容器div（class="box"）来包裹他
<div>
<iframe src="http:baidu.com" height="90" width="160" allowfullscreen="" frameborder="0">
</iframe>
</div>
div和iframe对应的样式：
.box{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
- position的值为relative ：用来给iframe设置为absolute值。
- padding-bottom的值 ：计算视频的纵横比例。在我们的示例中，宽高的比例是16:9，表示高度是宽度的56.25%。如果宽高比是4:3，我们设padding-bottom值为75%。
- padding-top为30% ：主要为Chrome指定一个空间。
- height=0 ：因为我们通过padding-bottom来设置元素的高度。我们没有设置width，那是因为他要配合响应式设计自动调整容器的宽度。
- overflow的值为hidden ：确保溢出的内容能够隐藏起来。
- 绝对定位 ：，那是因为包含他的容器的高度为０，如果iframe进行正常的定位，我们将给他的高度也是0;设置top和left，将iframe定位在容器的正确位置上；设置width和height值为100%，确保视频占满所用容器空间(实际是设置padding-bottom)的100%。
这样下来，会有个不错的体验！
参考文献http://www.w3cplus.com/responsive/making-embedded-content-work-in-responsive-design.html
