YouTube 嵌入具有最小和最大尺寸的动态尺寸

Posted 2023-03-13

【中文标题】YouTube 嵌入具有最小和最大尺寸的动态尺寸

【英文标题】：YouTube embed dynamic size with min and max size

【发布时间】：2016-10-27 20:37:29

【问题描述】：

我想将 YouTube 视频嵌入网站。

此视频的最小分辨率为 256 × 144 像素，最大分辨率为 1280 × 720 像素。

我想将嵌入视频限制为上述给定的分辨率。

我已经找到了动态 YouTube 嵌入的示例，但其中一些只有最小宽度，如果我将浏览器大小增加到超过 1280 像素宽度，视频会继续扩展。

我尝试添加一个最大宽度参数，但是当我调整浏览器的大小时，高度不会在此之后调整大小，并且视频在顶部和底部被截断。看起来像 64:9 而不是 16:9 的纵横比。

还有一些示例将我的视频裁剪为 4:3 的纵横比，这看起来很糟糕。

这是我找到的例子

CSS：

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


.video-container embed 
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;

html

<div class="video-container">
  <embed src="youtube code"></embed>
</div>

【参考方案1】：

我知道这有点晚了，但实现这一点的一种简单方法是在视频容器周围添加一个<div> 并给它一个max-width。这是额外的标记，但它有效。

这是一个演示（使用 SCSS，但想法相同）：https://codepen.io/mikejandreau/pen/mLbaQQ

像这样添加包装器<div>：

<div class="video-wrap">
  <div class="video-container">
    <iframe src="https://youtube.com/your-video?rel=0"></iframe>
  </div>
</div>

您可以使用已有的 CSS 并添加几个小项。我通常在嵌入视频时使用<iframe>，但下面的 CSS 也有一行用于<embed>。通过将padding-bottom: 56.25%; 添加到.video-container，您可以保持高度与宽度成正比，在这种情况下转换为16:9 的纵横比。

/* Set your aspect ratio */
.video-container 
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 56.25%; /* creates a 16:9 aspect ratio */


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


/* And set the max-width of the parent element */
.video-wrap 
  width: 100%;
  max-width: 600px;

希望这会有所帮助！

【讨论】：

这个答案应该被接受，效果很好，易于理解。注意 padding-bottom 用于保持高度与宽度的比率，因为百分比的填充是基于宽度的。在答案中，“高度”是 div 宽度的 56.25%。