Question

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

.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视口单元，那么页面看起来就在小提琴中，但与我的其他代码相结合，然后视频被炸得比页面大。

enter image description here

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

Answer 1

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

代码也变得简单得多。（您可能还会发现某些包装元素不再是必需的）

{
   latitude:0,
   longitude:0
}

那就是它。

Updated fiddle（调整大小以验证iframe保持宽高比）

<强> NB：

如果你只想让iframe占据视口宽度的某个百分比（比如说80％） - 这仍然可以在iframe上保持正确的宽高比时完成。

FIDDLE（调整视口宽度）

＆＃13;

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

＆＃13;

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

＆＃13;

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

如果你想保持宽高比，那么把宽度：100％和高度：自动

如果要覆盖整个父元素，则高度：100％和宽度：100％

如何实现流体宽度视频？

2 个答案:

Updated fiddle（调整大小以验证iframe保持宽高比）

FIDDLE（调整视口宽度）