Question

我想将YouTube视频嵌入网站。

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

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

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

我尝试添加一个max-width参数，但是当我调整浏览器大小时，此高度不会调整大小，并且视频会在顶部和底部被切断。看起来像宽高比为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>

Answer 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>行。

/* Set your aspect ratio */
.video-container {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 56.25%;
}

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

希望这有帮助！

YouTube使用最小和最大尺寸嵌入动态尺寸

1 个答案: