Bootstrap响应式iframe未缩放且embed类失效问题求助

问题根源 #

你目前的代码存在两个核心问题：

1. Bootstrap版本不兼容：引入了Bootstrap 5的CSS文件，但JS部分用的是Bootstrap 4的资源，版本不一致导致embed-responsive这类旧版样式无法被正确识别。
2. Bootstrap 5已废弃旧embed类：从Bootstrap 5开始，原有的embed-responsive和embed-responsive-item类被移除，替换成了基于比例的新类体系。

解决方案 #

方案1：升级到Bootstrap 5（推荐）

统一使用Bootstrap 5的CSS和JS资源，同时更新HTML结构为Bootstrap 5的响应式嵌入格式：

1. 替换资源引入为Bootstrap 5完整包：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

2. 修改iframe的容器结构，使用Bootstrap 5的ratio类（以16:9比例为例，可根据需求替换为ratio-4x3等其他比例）：

<section class="container">
    <div class="row h-100">
        <div class="col-md-6">
            <div>
                <div class="ratio ratio-16x9">
                    <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
        <div class="col-md-6"></div>
    </div>
</section>

方案2：回退到Bootstrap 4

如果需要保留原有embed-responsive类的写法，只需将CSS资源替换为Bootstrap 4版本，确保与JS版本一致：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

此时你原来的HTML结构无需修改，embed-responsive和embed-responsive-item类即可正常生效。

关于row的h-100设置 #

row的h-100属性本身不会直接导致embed类失效，但如果父元素section设置了100vh，可能会让col-md-6被拉伸至全屏高度。如果不需要iframe占满整个列的高度，可考虑移除row的h-100类，避免不必要的高度继承。

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