Making Your YouTube Embeds Mobile Responsive with Bootstrap

People share video content more now than ever before. YouTube is consistently the most popular social media and content platform among millennials and Gen Z. And video shows no signs of stopping. A recent Hubspot survey found that 53% of people want to see more video content. While shorter videos tend to perform better for businesses (those under 2 minutes), longer video series are becoming more popular particularly on platforms like YouTube.

Whether it's 20 seconds or 20 minutes, one element of your videos need to stay the same -- being mobile responsive. Millions are prioritizing content on their smartphones and tablets over a desktop. Making every element of a website mobile responsive is critical for having your website survive in this digital landscape. However, making sure videos actually render properly on all devices can be surprisingly challenging.

Here's how to make your YouTube embeds mobile responsive using Bootstrap:

The Problem

When you get a standard YouTube video embed, it should like something below:

Naturally, you would take this snippet and add it your templates or content editor to include on a given page. This typically works just fine on desktop viewpoints but has it draw backs on mobile devices and other smaller viewpoints:

As seen, the video extends past the width of the device. This forces your users to scroll horizontally (a terrible experience on mobile devices). It can also lead to unusual formatting problems with your responsive design.

The issue primarly stems from the fact that YouTube embeds hardcode the width and height parameters by default. This means that those dimensions tend to carry over to other devices and aren't truly responsive.

Working with Bootstrap Embeds

Fortunately, Bootstrap has a number of classes you can use to make these types of embeds, iframes, videos, and other similar objects responsive.

Making these changes just takes a few tweaks to the underlying embed code you get form YouTube:

You will first see that the iframe itself is wrapped in a div with the class of "embed-responsive". This sets a container of 100% width that a video embed can fill out.

The actual video iframe has a class of "embed-responsive-item" which forces the iframe to default to 100% width and height. Also of note is that you no longer need to include the hardcode width and height attributes, as the Bootstrap classes are taking care of that.

Using Aspect Ratios

Depending on the original aspect ratio of your YouTube video, you may need to customize your iframe container div to better fit the dimensions of the video embed itself. Bootstrap has four default aspect ratios you can use:

By making these adjustments, your video embed should render correctly (read responsively) on all devices:

As opposed to before, the video sits properly within the devices screen width/container.

Ensuring your content is as responsive as possible will lead to better user engagement, more conversions, and ultimately better distribution. Making these adjustments are essential, particularly as your encorporate more and more different media types.