並為iframe 添加embed-responsive-item 類；3. 始終使用嵌入鏈接（如youtube.com/embed/...）而非普通播放鏈接；4. 添加allowfullscreen 屬性以支持全屏播放；5. 視頻將自動(dòng)適應(yīng)容器寬度並保持寬高比，無需額外CSS。

Embedding a responsive video in Bootstrap is straightforward using the built-in responsive embed classes. These ensure your video (like YouTube, Vimeo, etc.) scales properly across devices.

Use Bootstrap's Responsive Embed Class

Bootstrap 4 and 5 both support responsive embeds via the .embed-responsive class (in v4) and simplified utility classes in v5. Here's how to do it:

For Bootstrap 5 (recommended)

In Bootstrap 5, use the .ratio utility class to maintain the correct aspect ratio:

 <div class="ratio"   style="max-width:90%">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
          title="YouTube video" 
          allowfullscreen>
  </iframe>
</div>

• The --bs-aspect-ratio: 16x9; sets the video aspect ratio.
• Supported ratios: 1x1 , 4x3 , 16x9 , 21x9 .
• Wrap any iframe, video, or embed element inside a .ratio div.

For Bootstrap 4

Use .embed-responsive with a ratio-specific class:

 <div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" 
          src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
          allowfullscreen>
  </iframe>
</div>

• Common classes: embed-responsive-16by9 , embed-responsive-4by3 , etc.
• Always add .embed-responsive-item to the iframe for proper scaling.

Key Tips

• ? Always use the embed URL (eg, youtube.com/embed/... ), not the regular watch link.
• ? Set allowfullscreen for fullscreen support.
• ? Works with YouTube, Vimeo, and other iframe-based videos.
• ? The container will scale the video to fit the parent width while preserving aspect ratio.

Supported Aspect Ratios (Bootstrap 5)

You can customize the ratio using CSS variables:

 <!-- 4:3 ratio -->
<div class="ratio" style="--bs-aspect-ratio: 4x3;">
  <iframe src="..." allowfullscreen></iframe>
</div>

<!-- 1:1 (square) -->
<div class="ratio" style="--bs-aspect-ratio: 1x1;">
  <iframe src="..." allowfullscreen></iframe>
</div>

Basically, just pick the right wrapper, use the embed link, and let Bootstrap handle the responsiveness. No extra CSS needed.