这个响应式iframe容器代码段如何工作？ [英] How does this responsive-iframe-container snippet work?

问题描述

我不记得如何找到此代码和应用了，没有没有问题：

I don't recall how I've found this code and applied it with no issues at all:

/* Responsive iFrame */

.responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.responsive-iframe-container iframe,   
.vresponsive-iframe-container object,  
.vresponsive-iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

它做了一些神奇的巫术，使嵌入式iframe谷歌日历具有响应能力，因此根据您的视图尺寸调整iframe侧面。

It does some magical voodoo to make an embedded iframe google calendar become responsive, thus adjusting the iframe side according to your view size. It's awesome!

问题是：它是如何工作的？ 位置或溢出没找到解决办法。也没有其他所有属性。我猜想这是 v响应的窍门，但是我没有添加任何jscript来处理它，我什至没有使用该类。我使用的只是 response-iframe-container ，如链接中所述！

Question is: how does it work? position or overflow don't seen to do the trick. Nor all the other properties. I'd guess the trick's on that vresponsive thing, but I haven't added any jscript to deal with that, and I'm not even using that class. All I use is responsive-iframe-container as explained in the link!

它似乎改变了每个元素在iframe中调整其大小。从我的卑鄙角度来看，这非常疯狂。

It looks like it changes every element inside the iframe to adjust their size. It's quite crazy from my humble point of view. There must be a some magic movement fooling me there!

推荐答案

好吧，无论出于什么原因（通常我在问问题时都会找到答案，并删除问题），我决定在Google中搜索响应式iframe ，并找到作为第二个结果，可能是代码的来源。它详细解释了所有内容，基本上，实际上是所有因素共同作用了它，而 v响应与它无关。

Well, for whatever reason (often I find answers while asking questions, and delete the question), I just decided to google for responsive iframe and found this as the second result, which is probably where the code came from. It explains everything in detail and, basically, it is actually all together that makes it work and vresponsive has nothing to do with it.

摘录自其摘要：

嵌入式内容习惯于破坏响应式布局，因为它包含在带有固定宽度。在本文中，我们已经看到了如何添加一个包含包装器和一些CSS的方法，以确保iframe中包含的所有嵌入内容都随着浏览器窗口的大小进行调整。

Embedded content has a habit of breaking responsive layouts, because it’s contained in an iframe with a fixed width. In this article, we’ve seen how to add a single containing wrapper, and some CSS, to ensure that all embedded content contained in an iframe resizes with the browser’s window.

从部分开始，它解释了那里的每个细节：

And from the part it explains a bit about each detail there:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

这会做一些事情：

This does a few things:

• 将位置设置为相对让我们对 iframe 本身使用绝对定位，我们将在稍后介绍。


• 填充-bottom 值是根据视频的宽高比计算得出的。在这种情况下，纵横比为16：9，这意味着高度将为宽度的56.25％。对于宽高比为4：3的视频，我们将填充底部设置为75％。


• padding-top 值设置为30像素，以便为Chrome留出空间-这是YouTube视频所特有的。


• height 设置为 0 ，因为 padding-bottom 赋予元素所需的高度。我们不设置宽度，因为它会自动使用包含该div的响应元素来调整大小。


• 将 overflow 设置为隐藏可确保任何隐藏在该元素外部的内容都不会显示。

• Setting the position to relative lets us use absolute positioning for the iframe itself, which we’ll get to shortly.
• The padding-bottom value is calculated out of the aspect ratio of the video. In this case, the aspect ratio is 16:9, which means that the height will be 56.25% of the width. For a video with a 4:3 aspect ratio, we set padding-bottom to 75%.
• The padding-top value is set to 30 pixels to allow space for the chrome — this is specific to YouTube videos.
• The height is set to 0 because padding-bottom gives the element the height it needs. We do not set the width because it will automatically resize with the responsive element that contains this div.
• Setting overflow to hidden ensures that any content protruding outside of this element will be hidden from view.

我们还需要设置iframe本身的样式。将以下内容添加到样式表中：

We also need to style the iframe itself. Add the following to your style sheet:

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

此目标为 iframe 放在具有 .video-container 类的容器中。我们来看一下代码：

This targets iframes inside containers with the .video-container class. Let’s work through the code:

• 使用绝对定位是因为包含元素的高度为 0 。如果iframe正常放置，我们也将其高度设为 0 。


• top 和 left 属性将iframe正确放置在包含元素中。


• width 和 height 属性可确保视频占用包含元素所使用的空间的100％（实际上是使用填充设置的）。

• Absolute positioning is used because the containing element has a height of 0. If the iframe were positioned normally, we would have given it a height of 0 as well.
• The top and left properties position the iframe correctly in the containing element.
• The width and height properties ensure that the video takes up 100% of the space used by the containing element (which is actually set with padding).

完成此操作后，视频现在将根据屏幕的宽度进行调整。

Having done this, the video will now resize with the screen’s width.

这篇关于这个响应式iframe容器代码段如何工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！