使 YouTube 视频嵌入响应

Question

我有一些来自 YouTube 的视频嵌入到我的网页中。问题是我正在使用下面附加的代码使其响应（通过 bootstrap）。它在手机和平板电脑上很好，但在台式机和笔记本电脑上变得非常庞大。当我无法解决问题时，我没有使用 YouTube 嵌入并切换到 HTML5 视频标签。在那里，响应问题已通过 width:100% 和 height auto 解决，但视频未加载并继续缓冲。因此，我再次切换到 YouTube 嵌入，这样至少可以加载视频，但它并没有真正响应（不是在笔记本电脑、台式机上）。还附上嵌入视频的网页的link。

代码-

<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>

Answer 1

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

-- 视频片段未加载 ... 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>

使 YouTube 视频嵌入响应

Make YouTube video embed responsive

html

css

twitter-bootstrap

iframe

bootstrap-5