Mobile Responsive YouTube Embeds: How it Works

by Jason Unger, Founder

Insights / Website Development / Mobile Responsive YouTube Embeds: How it Works

Don’t you just love it when stuff works?

Embedding multimedia, including photos, videos, and audio content into your website used to be a hassle.

You’d have to upload the content to your server and then have the software or WordPress plugins necessary to display the media seamlessly. Usually, that also meant you’d need the bandwidth and storage to host large files – and if you got hit with a ton of traffic, your server would have to keep up with the demands.

Thankfully, video sites like YouTube and Vimeo, photo sharing sites like Flickr, and audio platforms like SoundCloud can handle the bandwidth and storage needs, while providing easy embedding into your website.

But not all embeds are created equal.

oEmbed: The Simple Media Embed Code

Like the Open Graph protocol, oEmbed is a technology for sharing and embedding content across platforms.

Here’s how they explain it:

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

Essentially, what this allows us to do is simply paste the URL of a supported format into our WordPress editor and have the multimedia content automatically embedded.

So rather than having to copy iframe code that YouTube or Vimeo may supply, we can just paste the URL of the YouTube video or the Soundcloud file or the Tweet, and then WordPress will show the actual multimedia.

It’s incredibly simple, and saves a ton of work.

(If you’re interested, there’s a long list of oEmbed-supported outlets here.)

Mobile Responsive Embeds: The Code You Need

The most common issue with using oEmbed – especially with YouTube videos – is that the generated code is not mobile responsive.

Let’s talk in terms of YouTube videos, which are some of the most common embeds.

Take a look at the embed code for one of my #JungerExplainsItAll videos:

<iframe width="560" height="315" src="https://www.youtube.com/embed/mzHuFmATv6c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

You can see the iframe code is setting a width of 560 pixels and a height of 315 pixels.

That sounds good and all, but 560 pixels is going to be too wide for mobile phones – so anywhere that code exists, it’s going to break the responsive design of that page.

So how do we fix this?

The great resources from Advanced Custom Fields, promoting work from embedresponsively.com, give us the CSS we need to make all of our embeds responsive – even when the width is defined in an iframe, like with YouTube.

First, your video or embed needs to be wrapped in a div. We give it a class of “embed-container”.

Second, you need to add the following styles to your stylesheet:

.embed-container { 
        position: relative; 
        padding-bottom: 56.25%;
        overflow: hidden;
        max-width: 100%;
        height: auto;
} 

.embed-container iframe,
.embed-container object,
.embed-container embed { 
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}

And that’s it.

Easy, right?

Responsive Embeds Without Adding HTML

Here comes the fun part.

Usually, it’s not a great idea to add HTML to the WordPress editor, so we rarely recommend you do it.

Thankfully, there is another option.

You can add a simple filter to your functions.php file that will wrap any oEmbed in a div of your choosing. Here’s how:

/*Add a Container Around Embeds*/
add_filter('embed_oembed_html', 'dgtlnk_wp_embed', 99, 4);
function dgtlnk_wp_embed($html, $url, $attr, $post_id) {
	return '<div class="embed-container">' . $html . '</div>';
}

This means that any time you paste in a YouTube or Vimeo or other embed into your editor, the “embed-container” div will automatically wrap around it… and you’ll have a mobile responsive embed.

*Drops mic*