在响应式设计的网页布局中有一些元素没有发挥好，直接损坏响应式设计的布局。其中之一就是iframe元素，因为有时候你需要在页面中嵌入外部资源，比如说站外视频（优酷，腾讯视频等），这个时候就需要用到iframe元素。
JavaScript的办法就不讲了，主要说下如使用CSS将嵌套进来的内容具有响应式的效果，比如说视频等能随着浏览器的视窗自动调整。
<iframe width="640" height="498" src="http://v.qq.com/iframe/player.html?vid=q0167swo7g2&tiny=0&auto=0"></iframe>
iframe中包含了width和height属性。移除这两个属性，iframe会不显示
width属性意味着，当屏幕小于640px的时候，嵌入的内容会超出容器，将打破整个布局。接下来使用CSS的方法来解决这个问题。
为了能让嵌入的视频在Web中实现响应式效果，需要在iframe标签外添加一个容器div来包裹他。其结构类似这样：
<div> <iframe width="640" height="498" src="http://v.qq.com/iframe/player.html?vid=q0167swo7g2&tiny=0&auto=0"></iframe> </div>
我们给包含iframe的div容器添加一个类名video-container。
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
设置position的值为relative，用来给iframe设置为absolute值；
设置padding-bottom值来计算视频的纵横比例。在我们的示例中，宽高的比例是16:9，表示高度是宽度的56.25%。如果宽高比是4:3，我们设置padding-bottom值为75%；
设置padding-top值为30px，主要为Chrome指定一个空间；
height设置为０，因为我们通过padding-bottom来设置元素的高度。我们没有设置width，那是因为他要配合响应式设计自动调整容器的宽度；
设置overflow的值为hidden，确保溢出的内容能够隐藏起来。
也要给iframe自身设置样式。在你的样式文件中添加下面的样式代码：
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
iframe放置在div.video-container容器里：
使用绝对定位，那是因为包含他的容器的高度为０，如果iframe进行正常的定位，我们将给他的高度也是0;
设置top和left，将iframe定位在容器的正确位置上；
设置width和height值为100%，确保视频占满所用容器空间(实际是设置padding-bottom)的100%。
这样做之后，视频将根据屏幕的宽度进行调整。
