How to use the Bootstrap embed utility for videos

Bootstrap's embed tool can create responsive video containers. 1. Use the .embed-responsive class to wrap the iframe; 2. Add aspect ratio classes such as .embed-responsive-16by9; 3. Add .embed-responsive-item class to the iframe; 4. Bootstrap 5 users should use .ratio and .ratio-16x9 instead to achieve the same effect, ensuring that the video is displayed adaptively on different devices.

Bootstrap's embed utility makes it easy to create responsive video containers that automatically adjust to different screen sizes. This is especially useful when embedding videos from platforms like YouTube, Vimeo, or other iframe-based services. Here's how to use it properly.

Understanding the Bootstrap embedded wrapper

The embedded utility in Bootstrap creates a responsive container that maintains the correct aspect ratio (like 16:9 or 4:3) regardless of screen size. It works by using a wrapper <div> with specific classes that apply padding-based aspect ratios.<p> To use the embedded feature: </p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175668542594679.jpeg" class="lazy" alt="How to use the Bootstrap embedded utility for videos"><ol><li> Wrap your iframe (or video) in a container <code><div> .<li> Apply the <code>.embed-responsive class to the container.

Using common aspect ratios

The most commonly used aspect ratio for videos is 16:9. Here's how to set it up:

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

Replace VIDEO_ID with the actual YouTube video ID. The allowfullscreen attribute enables the fullscreen option in the player.

Other available aspect ratios include:

• .embed-responsive-21by9 – for ultra-wide videos
• .embed-responsive-16by9 – standard HD format
• .embed-responsive-4by3 – common for older videos or presentations
• .embed-responsive-1by1 – square format

Example with a 4:3 aspect ratio:

 <div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/VIDEO_ID"></iframe>
</div>

Key points to remember

• The .embed-responsive class must wrap the media element.
• The embedded element (iframe, video, etc.) must have the .embed-responsive-item class.
• This utility works in Bootstrap 4. Bootstrap 5 replaced it with a different responsive embedded method using .ratio classes.
• Make sure your Bootstrap CSS is included in the page for the styles to work.

For Bootstrap 5 users

If you're using Bootstrap 5, the old .embed-responsive classes are deprecated. Instead, use the .ratio helper:

 <div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>
</div>

Supported ratio classes include ratio-1x1 , ratio-4x3 , ratio-16x9 , and ratio-21x9 .

Basically, just pick the right wrapper and class based on your Bootstrap version, and the video will scale smoothly across devices.