站外视频/iframe/web内嵌内容响应式代码

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%;
}

这段代码做了几件事:

  1. 设置position的值为relative,用来给iframe设置为absolute值;
  2. 设置padding-bottom值来计算视频的纵横比例。在我们的示例中,宽高的比例是6:5,表示高度是宽度的93%。如果宽高比是4:3,我们设置padding-bottom值为75%;
  3. height设置为0,因为我们通过padding-bottom来设置元素的高度。我们没有设置width,那是因为他要配合响应式设计自动调整容器的宽度;
  4. 设置overflow的值为hidden,确保溢出的内容能够隐藏起来。

iframe放置在div.video-container容器里,我们是通过下面的方式让iframe工作的:

  1. 使用绝对定位,那是因为包含他的容器的高度为0,如果iframe进行正常的定位,我们将给他的高度也是0;
  2. 设置topleft,将iframe定位在容器的正确位置上;
  3. 设置widthheight值为100%,确保视频占满所用容器空间(实际是设置padding-bottom)的100%。

在上面的例子中,我们需要对每一个内嵌的内容都进行一个计算,设置它的padding-bottom的值。

当然也可以使用JS来实现相关效果。

你可以通过你的编辑器来编辑EmbedResponsively.com,生成响应式<embed>代码。实际上你可以通过javascript来解决,而不需要添加额外的标签和CSS

一个流行的插件是Todd Motto开发的FluidVids.js。FluidVids.jsdemo

如果你内嵌了iframe,引入了其他页面的网页。在高度未知的情况下,你可以通过“iframe高度自适应”来获得更好的用户体验。

原文链接:站外视频/iframe/web内嵌内容响应式代码 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/responsive-embed.html)

发表评论

请登录后发表评论: