具有最大宽度和高度的响应式 iframe

Question

我有一个固定高度的容器，容器内包含图片和iframe。要使图片具有响应性并防止垂直和水平溢出，可以设置以下CSS：

img {
    max-width: 100%;
    max-height: 100%;
}

这确保了纵向不会溢出肖像图像，横向不会溢出风景图像。

对于iframes，我使用“padding-ratio”技术，将包装元素的填充设置为iframe的宽高比（例如16:9视频的56.25%）：

.iframe-wrapper {
    position: relative;
    height: 0;
    padding-top: 56.25%;
    overflow: hidden;
}

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

尽管这意味着iframe会随着视口宽度的变化而自适应，但如果我更改视口的高度，则其效果并不相同。本质上，我希望iframe能够模仿图像的工作方式。

- Ben Foster

---

我试图实现几乎相同的功能，但是我没有固定的高度。我有图片和iframe，并且我希望iframes能够像max-width对图像所做的那样最小化。你在此期间找到了解决方案吗？ - MEM

Answer 1

对于我的需求（在响应式网站上嵌入来自 Vimeo 的视频），这在我测试过的浏览器中运行良好：

@media screen and (max-width: 750px) {
    iframe {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
    }
}

它不需要图像占位符，因此它更简单。

- Caitlin M

---

那真是太棒了！ - Alexander Gorg

我有什么遗漏吗？这对我无效。iframe 不像图像或视频标签那样保持100%的宽度。 - MadeByDouglas

Answer 2

这段代码对我很有帮助：

<div class="video-container"><iframe.......></iframe></div>

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

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

来源: https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

本文讲述如何制作一个响应式的100%宽度的YouTube嵌入iframe。在移动设备上，标准的嵌入代码可能会导致视频超出可见区域。解决这个问题的方法是使用一些CSS技巧来使视频适应屏幕大小。本文提供了完整的代码示例和演示效果。

- Erik Hopkins

---

如果您不想让视频宽度达到100％，而是例如50％，则会出现各种问题。 - Patrick

Answer 3

这里是我认为可能适用于您的修复方法，但您需要妥协“填充比率”技术，因为那不是必需的;)

HTML如下：

<div class="embeded-video">
      <img class="ratio-img" src="http://placehold.it/16x9" alt="16:9 Image" />
      <iframe src="//www.youtube.com/embed/I_dN9IpmOZU" frameborder="0" allowfullscreen align="center"></iframe>
    </div>

CSS如下所示：

.embeded-video {
    position: relative
}

.embeded-video .ratio-img {
    display: block;
    width: 100% !important;
    height: auto !important;
}

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

演示：http://codepen.io/anon/pen/MYbqgp?editors=110

意思是：这是一个演示链接，可以点击进入查看。

- Syed

---

如果视口太短（或太宽），该演示将溢出视口。 - Mikko Rantalainen

Answer 4

我不确定是否可能仅允许高度增长到最大高度，但可以约束高度并仍保持纵横比。这是一种聪明的技巧，使其起作用...我没有编写此代码，但我使用它，似乎效果很好：

https://codepen.io/shshaw/pen/uzlfh

以下是稍作修改后的代码，以备将来参考...（我的主要修改是使用 vh 单位代替百分比。）

/* Adapted from https://codepen.io/shshaw/pen/uzlfh - thanks Shaw! */

.responsive-embed {
  height: 45vh; /* Set height here */
  display: inline-block; /* Must be inline-block */
  position: relative; /* Keep the child element contained */
  
  /* min/max-width will break the aspect ratio, but otherwise work as expected */
  /*
  min-height: 200px;
  max-height: 400px;
  */
}

.responsive-embed .ratio {
  height: 100%; /* Our ratio canvas is expanded to as tall as the height set above. */
  width: auto; /* Allows the width to adjust based in the height, keeping the aspect ratio */
  visibility: hidden; /* Prevents non-transparent image or alt text from showing up */
  text-align: left;
}

.responsive-embed iframe {
  /* Force the child block to be same size as parent */
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

<div class="responsive-embed">
  <img class="ratio" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAAAAAAeQfPuAAAAC0lEQVQYGWMYrAAAAJkAAWzZLOIAAAAASUVORK5CIIA=" alt="16x9">
  <iframe src="https://player.vimeo.com/video/20732587/?api=0&amp;portrait=0&amp;autoplay=0&amp;color=21abb9" width="100%" height="100%" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

- Matt Browne

Answer 5

如果有人在使用（或考虑使用）UIkit，你可以通过添加uk-responsive属性来解决这个问题：

   <iframe uk-responsive src="...">

就是这么简单。

- Seth