如何实现流体宽度视频？答案

【问题标题】：How can I achieve fluid width video?如何实现流体宽度视频？
【发布时间】：2015-06-01 17:08:57
【问题描述】：

我尝试使用流体宽度视频的示例，它适用于视频，但其他类型的内容（纯文本评论）不应该有填充，现在他们得到了填充，导致每个评论之间没有很大的差距不是视频。您能告诉我如何修复布局，以使所有元素都流畅且响应迅速吗？

.abstract{

}

.abstract-inner {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.abstract-inner iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML

 <div class="abstract-container">

        <div class="abstract">
          <div class="abstract-inner">

              <iframe width="512" height="288" src="https://www.youtube.com/embed/r9yH-EmnGX4?feature=oembed" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

          </div>
          </div>



      </div>

以上只是一个片段，但如果有帮助，我做了一个fiddle。也许您知道我应该怎么做才能使视频具有流畅的响应性和正确放置的文本？

如果我只使用这个 CSS，那么除了视频的高度太小之外，一切都是鳍：

.abstract{

}

.abstract-inner {

}
.abstract-inner iframe{

   min-width: 100% !important;
   max-width: 100% !important;
   min-height: 100% !important;
   max-height:100% !important;
}

如果我使用 CSS 视口单元，则页面看起来不错，但与我的其他代码结合使用时，视频会变得比页面大。

在this fiddle 中，当调整页面大小以适应左侧菜单时，使用 CSS 视口会重现该问题。

【问题讨论】：

没有输入框。您在说什么文字，使用最新版本的 Chrome，所有文字看起来都正确放置
喜欢这个？ DEMO
那么你能改变什么？为什么不能更改 HTML？
好吧，您可以更改 HTML。让您的代码检测何时嵌入媒体并将其包装在该容器中<div>。
您是否意识到，如果您嵌入多个 youtube 视频，您会看到同样的问题？如果您更改元素放置和排列，您也会看到问题。从您提供的屏幕截图来看，它看起来像是固定像素设计。

标签： html css iframe

【解决方案1】：

在这种情况下，我会使用CSS viewport units。

代码也变得简单了很多。（您可能还会发现某些包装器元素不再需要）

iframe {
    width: 100%; 
    height: 56.25vw; /* 16:9 ... 56.25vw means 56.25% of the viewport width*/
}

就是这样。

Updated fiddle（调整大小以验证 iframe 保持纵横比）

注意：

如果您只希望 iframe 占据视口宽度的某个百分比（例如 80%） - 这仍然可以在保持 iframe 上正确的纵横比的同时完成。

FIDDLE（调整视口宽度）

iframe {
  width: 100%;
  height: 56.25vw;
  /* 16:9 ... 56.25vw means 56.25% of the viewport width*/
}
aside {
  width: 20vw;
  height: 100vh;
  background: aqua;
  display: none;
}
@media screen and (min-width: 900px) {
  aside {
    display: table-cell;
  }
  iframe {
    width: 80vw;
    height: 45vw;
    /* 9/16 * 80 = 45  */
  }
  .content {
    display: table-cell;
    vertical-align: top;
  }
  .wpr {
    display: table;
  }
}

<div class="wpr">
  <aside>blabla</aside>
  <div class="content">
    <iframe src="https://www.youtube.com/embed/r9yH-EmnGX4?feature=oembed" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    <p>content here</p>
    <p>content here</p>
    <p>content here</p>
  </div>
</div>

【讨论】：

感谢您的回答。它看起来很不错，但是如果我将它与我更大的代码库一起使用，那么视频就会变得非常大。我不知道为什么。我尝试将所有样式表添加到小提琴中，但无法重现该问题。我用截图更新了我的问题。我还不能用小提琴重现它。我认为使用 CSS 视口单元是正确的，但由于某种原因，它会像我的屏幕截图所示那样炸毁视频。
尝试在 iframe 上也使用width: 100vw;
嗯，代码相当复杂。据我所知，为了在您的情况下成功使用视口单位 - 您必须将菜单的宽度设置为视口的百分比 - 而不是以 px 为单位。 Here is an example 仅当视口宽度大于 900 像素时才使用媒体查询显示菜单。这应该足以让您继续前进。
我用使用媒体查询的新小提琴更新了答案
display: table-cell; 只是一个例子。菜单和 iframe 可以使用许多不同的方法进行内联设置，例如 display:inline-block 或 float:left 等

【解决方案2】：

我认为你可以做类似的事情

window.onresize = function(event) {
      updateiframeSize()
    };

function updateiframeSize() {
    $(".abstract-inner").each(function(){
        $this = jQuery(this);
        var ratio_cont = $this.width()/$this.height();
        var $iframe = $this.find("iframe");
        var ratio_iframe= $iframe.width()/$iframe.height();
        if (ratio_cont > ratio_iframe)
        {
            $iframe.css({"width": "100%", "height": "auto"});
        }
        else if (ratio_cont < ratio_img)
        {
            $iframe.css({"width": "auto", "height": "100%"});
        }
    }); 
};

如果你想在 css 中尝试

iframe{
  width: 100%    !important;
  height: auto   !important;
}

如果你想保持纵横比，那么输入 width:100% 和 height:auto

如果你想覆盖整个父元素，那么 height:100% 和 width:100%

【讨论】：