不能通过CSS样式穿透修改Bootstrap 5嵌入的iframe比例，因浏览器同源策略和CSS作用域机制禁止跨iframe选择器；.ratio类仅控制父容器宽高比，iframe内部样式须通过同源JS注入或跨域postMessage由内部页面自行调整。
不能通过CSS样式穿透修改Bootstrap 5嵌入的iframe比例——这是浏览器同源策略和CSS作用域机制共同决定的硬性限制，不是写法或类名的问题。
为什么iframe内部比例无法被外部CSS控制
Bootstrap 5 的 .ratio 类只作用于父容器（即包裹 iframe 的 <div>），它设置的是这个容器自身的宽高比（通过 aspect-ratio 或 padding-bottom fallback）。而 iframe 内部页面是一个完全独立的文档上下文，其布局、尺寸、甚至是否响应式，都由它自己的 HTML/CSS/JS 决定。
外部页面的 CSS 规则无法选择或影响 iframe 内部任意元素，哪怕只是改个 width 或 height —— 这不是 Bootstrap 的缺陷，是浏览器安全模型的底层约束。
- 尝试写
.my-ratio iframe { width: 100%; height: 100%; }：只会影响iframe元素自身的盒模型，但不会改变它加载的页面内容如何渲染 - 尝试写
.my-ratio iframe .video-player { aspect-ratio: 4/3; }：完全无效，因为选择器根本无法跨过 iframe 边界匹配到内部 DOM - 即使 iframe 同源，外部 CSS 也无法自动注入到 iframe 文档的
<head>中——必须显式用 JS 注入<style>或操作contentDocument
.ratio 类真正起作用的位置在哪
它只控制你写的那个 <div class="ratio ratio-16x9"> 容器本身的尺寸比例，以及为子元素提供定位上下文。能否让 iframe “看起来”按比例显示，取决于三件事是否全部满足：
立即学习“前端免费学习笔记（深入）”；
- 父容器有
.ratio+ 比例类（如.ratio-16x9） -
iframe标签上**删掉所有width和heightHTML 属性**（YouTube 默认代码里的width="560" height="315"必须手动去掉） -
iframe子元素必须加class="position-absolute top-0 start-0 w-100 h-100"（或等效 CSS），否则它不会填满父容器
漏掉任意一项，就会出现“只显示左上角”“右侧大片留白”“高度塌陷成一条线”等典型现象。这不是比例没生效，而是子元素根本没按预期撑开。
如果真要调整 iframe 内部视频的显示比例，该怎么做
只有两种合法路径，且都与外部 CSS 无关：
-
同源前提下：在
iframe.onload后，用 JS 获取iframe.contentDocument，然后动态注入<style>，例如：const style = iframeDoc.createElement('style');<br>style.textContent = '.player-container { aspect-ratio: 21/9 !important; }';<br>iframeDoc.head.appendChild(style); -
跨域前提下：必须由 iframe 内部页面主动暴露接口（如监听
postMessage），接收父页发来的比例指令，再由它自己执行 DOM/CSS 更新。父页不能越权操作。
试图用外部 CSS 强行“穿透”修改 iframe 内容，本质是在对抗浏览器安全边界——这条路从一开始就没有出口。
