如何在Bootstrap 5网格中实现响应式YouTube视频布局？

你的代码问题出在Bootstrap 5已经弃用了embed-responsive系列类，而且现有视频容器没有充分利用列宽，导致大屏幕上视频尺寸过小且不随屏幕缩放。按照下面的方式修改，就能实现大屏两列并排、小屏自动堆叠的效果：

修正后的代码 #

<div class="container">
  <div class="row row-cols-1 row-cols-md-2 g-4">
    <!-- 第一组视频 -->
    <div class="col d-flex justify-content-center">
      <div class="ratio ratio-16x9 w-100">
        <iframe src="https://www.youtube.com/embed/Video1" class="w-100" allowfullscreen></iframe>
      </div>
    </div>
    <div class="col d-flex justify-content-center">
      <div class="ratio ratio-16x9 w-100">
        <iframe src="https://www.youtube.com/embed/Video2" class="w-100" allowfullscreen></iframe>
      </div>
    </div>
    <!-- 第二组视频 -->
    <div class="col d-flex justify-content-center">
      <div class="ratio ratio-16x9 w-100">
        <iframe src="https://www.youtube.com/embed/Video3" class="w-100" allowfullscreen></iframe>
      </div>
    </div>
    <div class="col d-flex justify-content-center">
      <div class="ratio ratio-16x9 w-100">
        <iframe src="https://www.youtube.com/embed/Video4" class="w-100" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>

关键改动说明 #

• 用Bootstrap 5官方推荐的ratio ratio-16x9替换了废弃的embed-responsive类，确保视频保持16:9的响应式比例
• 给iframe添加w-100类，让视频占满容器的全部宽度，解决大屏幕尺寸过小的问题
• 将所有视频放在同一个row中，利用row-cols-1 row-cols-md-2自动实现小屏单列、大屏双列的布局
• 给col添加d-flex justify-content-center，让视频在列中水平居中（如果不需要居中可以去掉）

内容的提问来源于stack exchange，提问作者wolfman