iframe固定了一个宽度和高度，当我们不做处理的时候，在移动设备或者响应式设计中，就会自适应不了。这里分享一下如何自适应站外视频/iframe/web内嵌内容等自适应。
我们知道table可以移动设备中也可以简单的实现自适应，但他毕竟是有固定内容，不可能把内容挤掉。我们可以在table的外面加一个层，然后添加100%和overflow-y:auto;这样如果设备小于table本身就会出现滚动条可以拉动。
而内嵌视频则会根据内容的大小来自适应窗口。
See the Pen responsive iframe by kujian (@kujian) on CodePen.
主要代码：
.video-container{
position:relative;
height:0;
padding-top:20px;
padding-bottom:93%;
overflow:hidden;
}
.video-container embed, .video-container iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.iframe-container{
padding-bottom:56%;
}
这段代码做了几件事：
- 设置
position的值为relative，用来给iframe设置为absolute值； - 设置
padding-bottom值来计算视频的纵横比例。在我们的示例中，宽高的比例是6:5，表示高度是宽度的93%。如果宽高比是4:3，我们设置padding-bottom值为75%； height设置为０，因为我们通过padding-bottom来设置元素的高度。我们没有设置width，那是因为他要配合响应式设计自动调整容器的宽度；- 设置
overflow的值为hidden，确保溢出的内容能够隐藏起来。
iframe放置在div.video-container容器里，我们是通过下面的方式让iframe工作的：
- 使用绝对定位，那是因为包含他的容器的高度为０，如果
iframe进行正常的定位，我们将给他的高度也是0; - 设置
top和left，将iframe定位在容器的正确位置上； - 设置
width和height值为100%，确保视频占满所用容器空间(实际是设置padding-bottom)的100%。
在上面的例子中，我们需要对每一个内嵌的内容都进行一个计算，设置它的padding-bottom的值。
当然也可以使用js来实现相关效果。
你可以通过你的编辑器来编辑EmbedResponsively.com，生成响应式的<embed>代码。实际上你可以通过javascript来解决，而不需要添加额外的标签和CSS。
一个流行的插件是Todd Motto开发的FluidVids.js。FluidVids.js的demo。
如果你内嵌了iframe，引入了其他页面的网页。在高度未知的情况下，你可以通过“iframe高度自适应”来获得更好的用户体验。
