Video frame from Brian Scott McFadden’s “Go Fly Yourself” (https://www.youtube.com/watch?v=hn6UCOPv-f4)

ProTip: How to make an embedded YouTube video responsive.

Screen capture of a new website we’re building for Brian Scott McFadden, with his video “Go Fly Yourself”

I’m going to share some code I use to make embedded YouTube videos responsive. They’ll scale larger and smaller using the a single embed code block.

In my day-to-day responsibilities I build websites. Most of these sites are powered by various content management systems geared for businesses.

Most of these CMS’s power websites that need to make $ to keep their doors open. Some are managed by one person, others an entire team of people. What they have in common is that the website in question is often not managed day-to-day by web developers or other folks with advanced coding skills. Instead, it’s often the folks on the marketing team, content strategists and copy writers whose focus is attracting leads, customer service, and writing for consumers — things like that. These folks may know some handy markup like how to write a break tag <br> or make an element bold <b> or <strong> but writing code is not their day’s focus, nor something they have much time to learn.

This solutions is geared toward those folks. If you’re comfortable with copy and paste from YouTube or Vimeo and you can comfortably use your browser and whatever tool you use to publish content on your website — I wrote this one for you and hopefully it’ll make your life a little bit easier and your website’s content a little bit easier to enjoy across device sizes.

YouTube and Vimeo make adding video to a website easy. One thing though that most folks will encounter over time is that those YouTube videos are not mobile responsive within your web page. What I mean by that is that once embedded, those videos are often stuck at a fixed size. Whatever size the person embedding them created the code at, is the size they’re fixed to.

Fixed sizing presents a challenge if you’re on a device that’s got a screen that’s smaller than whatever that fixed size is. The rest of your web page may scale itself well at that size, but that embedded video often stays stubbornly fixed — if you’re on a smaller mobile device, tablet or laptop this can cause annoying problems for your customers or anyone who’s reading on that page.

My strategy includes code that’s reusable and simple to add. It’ll also override the YouTube embed code regardless of the size you’ve chosen to embed at, and it’ll work regardless the size the embed was created at.

Using this code snippet, the video will try and scale itself larger or smaller depending on both the size of the device that is viewing the web page, and the container it’s embedded in.

You can incorporate this solution into a CMS template too. That way it’s completely obfuscated from the content editors if they’re not tech specialists. Though that’s not a requirement in order to use it.

This solution uses pure HTML and CSS — requires no Javascript. It should work for older browsers too. NOT ie6 older, but old enough ;)

Video frame from Brian Scott McFadden’s “Go Fly Yourself” (https://www.youtube.com/watch?v=hn6UCOPv-f4)

================ The CSS code

<style type=”text/css”>

.video-component {
 position: relative;
 padding-top: 0;
 padding-bottom: 0;
 margin-top: 0;
 width: 100%;
 max-width: 100%;
 height: auto;
 max-height: 100%;
}
.video-component:before {
 /* this uses a CSS psuedo class to create scaling width and height of the video propotioate to the screen size it’s being viewed on */
 content: “ “;
 display: block;
 padding-bottom: 56.25%;/* the padding value is the magic here */
 width: 100%;
 height: auto;
}
.video-component .video,
.video-component figure,
.video-component iframe,
.video-component object,
.video-component embed {
 /* we’re overriding the embed elements size values */
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 min-height: 100%;
 height: 100%;
}

</style>

=================

================= The HTML markup

<div class=”video-component”>
 <figure role=”application” class=”video”>
 <iframe width=”560" height=”315" src=”https://www.youtube.com/embed/hn6UCOPv-f4" frameborder=”0" allowfullscreen></iframe>
 </figure>
</div><! — /.video-component — >

=================

Screen capture of a new website we’re building for Brian Scott McFadden, with his video “Go Fly Yourself”

This solution applies the fundamentals from the aspect ratio hack that compensates for absolutely positioned elements in CSS.

If you notice, the embedded video is only 560pixes wide by 315 pixels tall. But, using this technique it’ll scale much larger than that, or much smaller, with no need to adjust the size defined within the embed code. You can even change the aspect ratio for videos that are not 16:9 aspect ratio. You’d do that by changing the padding value in the “:before” pseudo element.

Thanks to Comedian, Actor, Writer, Brian Scott McFadden for the dope video. Please show him some love and give a follow on Instagram, YouTube, or Twitter. You can watch that video here https://www.youtube.com/watch?v=hn6UCOPv-f4

Video frame from Brian Scott McFadden’s “Go Fly Yourself” (https://www.youtube.com/watch?v=hn6UCOPv-f4)

This is your YouTube embed code:

<iframe width=”560" height=”315" src=”https://www.youtube.com/embed/hn6UCOPv-f4" frameborder=”0" allowfullscreen></iframe>

Now you’re going to wrap this code with that the HTML markup code I’ve given you:

<div class=”video-component”>
 <figure role=”application” class=”video”>

Also, don’t foget to add the closing tags after the YouTube iframe:

</figure>
</div><! — /.video-component — >

Screen capture of a new website we’re building for Brian Scott McFadden, with his video “Go Fly Yourself”

Add the CSS code either to your stylesheet .css document. Or you can add it inline.

If adding inline, add the CSS once on whatever page you’re going to implement this technique. Don’t forget to include the opening and closing <style> tags.

If you’re adding this to an existing CSS style sheet (.css document), remember to remove the opening and closing <style> tags from the code block.

The screen captures shown throughout this post are all from a web page using the same video scaling larger and smaller depending on device size as well as the container that video was within. The video scaling was made possible using the technique outlined here.

If you’ve got any questions, please feel free to hit me in the comments.

My name’s Reuben, I’m a web developer and also co-founder of Fly Media Productions. You can follow me on Twitter, Instagram, or GitHub at @FlyDuoATL. And my website is FlyMediaProductions.com.

Peace.