DEV Community

Cover image for Responsive YouTube <iframe> Embedding with Bootstrap
Eamonn Cottrell
Eamonn Cottrell

Posted on • Originally published at blog.eamonncottrell.com on

1

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.

YouTube Embed Code Screenshot

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>



Enter fullscreen mode Exit fullscreen mode

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>



Enter fullscreen mode Exit fullscreen mode

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>



Enter fullscreen mode Exit fullscreen mode

iframe:



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



Enter fullscreen mode Exit fullscreen mode

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. 👇

Hashnode Guide Link

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.

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs