How do I use the ratio helper to embed responsive YouTube and iframe content?

Asked on Jun 13, 2025

1 Answer

Bootstrap 5 provides a ratio helper to make iframes, such as YouTube videos, responsive. This ensures that the embedded content maintains the correct aspect ratio across different screen sizes.

<!-- BEGIN COPY / PASTE -->
        <div class="ratio ratio-16x9">
            <iframe src="https://www.youtube.com/embed/your_video_id" title="YouTube video" allowfullscreen></iframe>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `ratio-16x9` class is used for a 16:9 aspect ratio, which is common for YouTube videos.
Replace `your_video_id` with the actual ID of the YouTube video you want to embed.
The `allowfullscreen` attribute enables full-screen mode for the video.
You can adjust the ratio class (e.g., `ratio-4x3`) for different aspect ratios as needed.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions