Responsive YouTube <iframe> Embedding with Bootstrap

Copy & Paste Doesn't Always Work ☹️

It comes close, but if you copy and paste the embed code off of a YouTube video, you can still run into issues. Particularly on mobile. I found this out just this morning when adding a tutorial video to a simple web app I made using Bootstrap 5.

This worked fine, and previewed well on localhost:5500. But, it was screwy on mobile when I previewed the live site on my iPhone 11. The fixed width was extending off the screen to the right. If you're like me, anytime I encounter stuff like this, it causes me an infinite amount of strife.

Luckily, there's a pretty easy fix that Bootstrap documents. Bootstrap 4 handles it this way. Bootstrap 5 handles it this way.

The Code 💾

Both have you wrapping a parent html <div> with either .embed-responsive or .ratio (depending on the Bootstrap version) and then having the iframe within that element.

Bootstrap 5

My div looks like this:

<div class="tutorial container text-center my-5 ratio ratio-16x9">
</div>

And I stripped all the fluff out of the YouTube copy/paste embed code so that I was left with this for the iframe:

<iframe src="https://www.youtube.com/embed/qgInM6FH8Lk?rel=0"
    allowfullscreen>
</iframe>

Bootstrap 4

There are different semantics with Bootstrap 4 which accomplish the same thing:

div:

<div class="tutorial container text-center my-5
    embed-responsive embed-responsive-16by9">
</div>

iframe:

<iframe class="embed-responsive-item"
    src="https://www.youtube.com/embed/qgInM6FH8Lk?rel=0" 
    allowfullscreen>
</iframe>

Interestingly, I accidentally used the Bootstrap 4 solution initially and it worked on mobile while not fully expanding on larger screens.

Embedding on Hashnode 🖥️

Bonus! Here's the video in question. And it's super easy to embed right here on Hashnode. All that's required is a handy percent sign 😀. Here are the embed docs.
%[https://www.youtube.com/watch?v=qgInM6FH8Lk]

And on DEV, the syntax is a little different:
{% embed https://www.youtube.com/watch?v=qgInM6FH8Lk %}
👇

And in writing this article, I realized that @hashnode has made it even easier to find snazzy shortcuts without jumping all the way to the docs if you choose. There's a Guide link at the top of the article next to the Preview link.

This is a great, quick resource for markdown, embeds, and other commonly used tools for blogging here. 👇

Say Hey! 👋

Hope this is helpful for you, and you have a great day!

Come say hey to me over on Twitter and/or LinkedIn.