Web Design, Development, & Hosting

How To: Responsive YouTube Videos

@

YouTube is a great platform and the ability to share videos from YouTube onto your website is amazing. But, one of the most common problems that web designers and website owners run into is that the default embed code that YouTube provides is not automatically mobile friendly. Below is a quick and easy way to make your YouTube videos scale appropriately on any device. We use this trick all the time for our websites and our clients websites.

Here's the default YouTube code:

Here's the modified YouTube code:

Here's the CSS that makes it work:

.videoWrapper { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; }
.videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

This is the simple tutorial of how to make it work. If you're more interested in the full details of what's going on, how it works, and more advanced techniques then check out the article we referenced for this. It's an article called Fluid Width Video found on CSS-TRICKS.

BloggingCSSHTMLTips & Tricks

embed, fluid width, responsive, video, youtube

61
55
62
56
56
55
61
56
58
53
Views Up Votes Down Votes
269 0 0