Question

Youtube iframe需要根据div容器的宽度进行缩放。宽度根据页面摘要的布局而变化。

Youtube视频的宽高比是560/315，宽度/高度。

在我尝试过的操作中（见下文），Youtube iframe的高度太短，无法裁剪缩略图。

实际上是裁剪的缩略图。如果您播放视频，则调整比例…

但是视频太窄（微小），因为它显示的iframe容器的高度太短了。

这会在Firefox和Chrome最新的浏览器上发生。

如何获得显示以将视频调整为容器div中正确的长宽比？

请参见https://codepen.io/iamalta/pen/MMwwwK

此处的视频：https://www.youtube.com/watch?v=UDV161pAcUU

HTML代码：

<div class="col-12">
   <div class="left col-6">
       <iframe class="left youtube" src="https://www.youtube.com/embed/UDV161pAcUU" frameborder="0"
           allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
       </iframe>
   </div>

   <div class="left col-6">
       <div class="p1">
           This Tropical Water Lily Preview Video shows Tricker's and the wonderful world of Tropical Water
           Lilies. Some scenes are from our DVD Introduction to Water Gardening. Purchase entire DVD.
       </div>
       <div class="clearfix"></div>

       <div class="col-12 p0">
           <img src="https://www.tricker.com/media/ecom/description/redtropicalheading1.jpg" class="img-100-auto" />
       </div>
   </div>
</div>

CSS

.youtube{
  width: 560px;
  height: 315px;
  max-width: 100%;
  height: 56.25%;
}
.img-100-auto{width:100%;height:auto}
.clearfix:after, .clearfix:before{content:" ";display:table}
.clearfix:after{clear:both}
.col-6{width:50%}
.col-12{width:100}
.left{float:left}
.p1{padding:rem}
.center{text-align:center}

预先感谢您的建议，希望能得到有效的答案！

Answer 1

如果您使用vw而不是百分比，并计算高度为宽度除以长宽比，该怎么办。由于每个div的填充，您可能需要调整宽度以使其更合适。

所以这个：

.youtube{
  width: 50vw;
  height: calc(50vw/1.77);
}

Answer 2

我注意到.youtube的CSS上有一种类型。

它有两个高度。

如果我删除它，那么高度会太高。

这也不起作用：

.youtube{width: 1120px;height:56.25%;max-width:100%;}

我找到了！谢谢你的帮助。我整天为此工作，并感谢您的建议。

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

根据DIV宽度调整Youtube显示的宽度/高度

2 个答案: