嵌入 YouTube 视频时自动高度？

Posted 2023-02-24

【中文标题】嵌入 YouTube 视频时自动高度？

【英文标题】：Automatic height when embedding a YouTube video?

【发布时间】：2016-06-19 06:52:18

【问题描述】：

我在我的网站上嵌入了一个 YouTube 视频，但问题是我需要根据视频的宽度和纵横比自动调整高度。所以如果我的宽度是 1280，如果视频是 16:9，我的高度应该是 720。 我试过使用“VW”和“VH”单位，但这些似乎不适用于 iframe。我的宽度已经按比例设置好了。

我的代码如下：

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

【问题讨论】：

这能回答你的问题吗？ Displaying a YouTube video with iframe full width of page

这能回答你的问题吗？ ***.com/questions/15844500/…

【参考方案1】：

您可以通过此代码解决它。 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   src="https://www.youtube.com/embed/_TyJeKKQh-s?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

工作原理：容器元素的高度为零，底部填充百分比。底部填充百分比是容器宽度的百分比，因此它具有固定的纵横比。但为了让 iframe 显示在零高度容器内，您需要使容器相对而 iframe 绝对，定位在 div 内。

【讨论】：

@RTW 你能解释一下吗，一点点

删除 col-sm-6 样式

参考h3xed.com/web-development/…

真的很佩服这个方案，css理解的很深..

这段代码对我不起作用，除非 .video-container 也设置了 width: 100%，就像 source 中的示例一样，这是从

复制而来的

【参考方案2】：

我能够在样式元素的宽度和高度上使用vw 制作响应式 iframe 大小，因为我知道我希望元素使用的水平宽度量，然后我计算高度基于宽度和视频为 16:9 的知识。如果您希望视频占用 893 像素屏幕尺寸以上 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>

【讨论】：

谢谢。这很符合我的要求。

【参考方案3】：

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

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

【参考方案4】：

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

如果您知道iframe 的容器的宽度（在绝对单位中，例如px 或vw，而不是%），那么您可以使用css calc() 作为单行height css中的解决方案：

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