Question

我在我的网站上嵌入了一个YouTube视频，但问题是我需要根据视频的宽度和宽高比自动调整高度。因此，如果我的宽度是1280，如果视频是16：9，我的身高应该是720。我尝试使用'大众'和'VH'单位，但这些似乎不适用于iframe。我的宽度已按比例设定。

我的代码如下：

<iframe style="margin-right: 1%; margin-left: 1%;" width="98%" height="" src="https://www.youtube.com/embed/HwzQbfde-kE" frameborder="0"></iframe>

Answer 1

问题由Reddit用户'mr_bacon_pants'here.

解决

Answer 2

您可以通过此代码解决它。 Live example Link

CSS：

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

HTML示例

<div class="video-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/_TyJeKKQh-s?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

Answer 3

我能够在样式元素的宽度和高度上使用vw来生成响应式iframe大小，因为我知道我希望元素使用的水平宽度量，然后我根据宽度和视频为16：9的知识来计算高度。如果您希望视频占用屏幕尺寸893px以上的水平空间的45％，否则消耗90％的水平空间，则：

.embedded-video-16-9 {
  width:  90vw;
  height: 50.625vw; /* 90*9/16 */
  margin-left: 5vw;
  margin-right: 5vw;
}

@media (min-width: 893px) {
  .embedded-video-16-9 {
    width: 45vw;
    height: 25.3125vw; /* 45*9/16 */
    margin-left: 2vw;
    margin-right: 2vw
  }
}

使用方式：

<iframe 
  class="embedded-video-16-9" 
  src="https://www.youtube.com/embed/_TyJeKKQh-s?controls=0" 
  frameborder="0" 
  allowfullscreen=""
></iframe>

Answer 4

html width 属性只接受数字 ("valid non-negative integers")，而不是像原始问题中那样以测量单位（%、px、vw 等）为后缀的字符串。

如果您知道 iframe 的容器的宽度（以绝对单位，如 px 或 vw，而不是 %），那么您可以使用 {{3 }} 用于 css 中的单行 height 解决方案：

.youtube-embed {
  --container-width: 720px;
  --ratio: calc(16 / 9); /* 1.77 */
  width: 100%;
  height: calc(var(--container-width) / var(--ratio));
}

这是一个响应式解决方案，它考虑了容器上的水平填充：

:root {
  --video-ratio: calc(16 / 9);
  --video-container-max-width: 640px;
  --video-container-x-padding-sum: 2rem; /* eg, padding: 0 1rem */
}

.youtube-embed {
  --video-container-width: calc(100vw - var(--video-container-x-padding-sum));
  width: 100%;
  height: calc(var(--video-container-width) / var(--video-ratio));
}

@media only screen and (min-width: 672px) {
  .youtube-embed {
    --video-container-width: var(--video-container-max-width);
  }
}

Answer 5

如果您要浏览整个视口，则可以使用以下代码：

iframe{
  width: 100vw
  height: calc(100vw/1.77);
}

嵌入YouTube视频时的自动高度？

5 个答案: