How to embed a YouTube Video in a Bootstrap Page?

Last Updated : 16 Feb, 2024

To embed a YouTube video in a Bootstrap page, you can use the responsive embed-responsive class along with an iframe element. This ensures that the video scales appropriately on different devices.

Syntax:

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

Key Features:

Responsive Design: The embed-responsive class ensures that the video adjusts responsively to the container size.
16:9 Aspect Ratio: The embed-responsive-16by9 class sets a standard 16:9 aspect ratio for widescreen playback.
YouTube Video URL: Replace “VIDEO_ID” in the src attribute with the actual YouTube video ID you want to embed.
Fullscreen Option: The allowfullscreen attribute enables viewers to watch the video in fullscreen mode.