使 YouTube 视频嵌入响应式答案

【问题标题】：Make YouTube video embed responsive使 YouTube 视频嵌入响应式
【发布时间】：2022-04-19 12:18:17
【问题描述】：

我在我的网页上嵌入了一些来自 YouTube 的视频。问题是我正在使用下面附加的代码来使其响应（通过引导程序）。它在移动设备和平板电脑上很好，但在台式机和笔记本电脑上却非常庞大。当我无法解决问题时，我没有使用 YouTube 嵌入并切换到 HTML5 视频标签。在那，响应问题通过 width:100% 和 height auto 解决，但视频没有加载并继续缓冲。所以，我再次切换到 YouTube 嵌入，以便至少加载视频，但它不是真正响应（不是在笔记本电脑、台式机上）。同时附上嵌入视频的网页的链接。

代码-

<div class="container">
  <div class="ratio ratio-16x9">
    <iframe src="https://www.youtube.com/embed/kq7CdSf7ocA?rel=0" title="YouTube video 
      player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
      encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

【问题讨论】：

什么版本的 Bootstrap？
我使用的bootstrap版本是5.0.1
你希望它在桌面上有多大？
它的宽度应该是大约。 900 和高度自动。

标签： html css twitter-bootstrap iframe bootstrap-5

【解决方案1】：

您可以尝试在 iframe 上设置max-width。

-- 视频未加载到 sn-p ... Fiddle

.container {
  display: flex;
  justify-content: center;
}

iframe {
  max-width: 900px;
  max-height: 400px;
}

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<div class="container">
  <div class="ratio ratio-16x9">
     <iframe src="https://www.youtube.com/embed/kq7CdSf7ocA?rel=0" title="YouTube video 
      player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
      encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
 </div>

【讨论】：

非常感谢您的帮助。想问一下高度还能调吗？
@YADAVMAHIR 是的，因为没有设置高度，它使用来自ratio 的height: 100%;。所以它显示了 900px 的高度，或者如你所说，height: auto;。看到调整，我做了它，所以最大高度是 400px。（切成两半）。
非常感谢您的帮助。问题已解决。
@YADAVMAHIR 没问题~看这篇文章what to do if my question has been answered