What's the right way to embed videos in Bootstrap 5.3?

[dafaher]

Hello guys, thanks for reading. I'm new to Bootstrap and would like to know the best way to embed videos for a responsive experience. Apparently there was an embed-responsive class, but from what I saw it's not declared in the Bootstrap 5.3 css files.

So, should I just paste the YouTube code or is there a specific way to do it?

[julien-deramond]

Hello @dafaher
Indeed, you had .embed-responsive in Bootstrap v4:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

We’ve dropped the .embed-responsive-item and element group selector in favor of a simpler .ratio > * selector. No more class is needed, and the ratio helper now works with any HTML element:

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

See Bootstrap v5 > Ratios documentation.

[dafaher]

Good morning, @julien-deramond! Thank you very much for your prompt response and for the explanation of what the code was like before and what it is like now. I will read the documentation and put it into practice, thank you very much!