Bootstrap 使YouTube视频嵌入响应

vdzxcuhz 于 2023-10-14 发布在 Bootstrap

关注(0)|答案(2)|浏览(155)

我有一些视频是嵌入在我的网页从YouTube。事情是我使用下面的附加代码，使其响应（通过 Bootstrap ）。它在移动的和平板电脑上很好，但在台式机和笔记本电脑上则非常庞大。当我无法解决这个问题时，我没有使用YouTube嵌入，而是切换到HTML5视频标签。在这种情况下，响应问题通过宽度：100%和高度自动解决，但视频没有加载并继续缓冲。所以，我再次切换到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>

twitter-bootstrap

来源：https://stackoverflow.com/questions/70863997/make-youtube-video-embed-responsive

2条答案

按热度按时间

fcg9iug31#

你可以尝试在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/[email protected]/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>

赞(0）回复(0）举报 2023-10-14

watbbzwu2#

从iframe元素中删除内联样式（width & height），然后将此css代码添加到样式文件中：

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

iframe {
    aspect-ratio: 16 / 9;
    width: 100% !important;
}

赞(0）回复(0）举报 2023-10-14

我来回答

Bootstrap 使YouTube视频嵌入响应

2条答案

相关问题

热门标签

最新问答