Responsive Youtube Embed | Brand YouTube Videos Responsive

Responsive Youtube Video Embed

Quick Summary Tutorial on how to make Youtube videos responsive using CSS & HTML. Responsive Youtube embeds use iframes, CSS & HTML to brand your Youtube videos responsive.

Responsive YouTube Video Embed

Have you lot ever tried to make a YouTube video responsive? If so, it tin exist somewhat tricky. I came beyond a pocket-sized problem when adding a video from YouTube to one of my blog posts about the Kittenish Gambino website that nosotros created.

Since this website is fully responsive, I needed the YouTube video to re-size depending on the browser size or device width. Yet, when I added the embed code, the video had a fixed height and width. (uggh!) This looked fine on desktop computers, but pretty much broke the pattern when viewing on a mobile device. I wanted to know how to brand a youtube video mobile. Therefore, nosotros needed a responsive YouTube video embed code.

One would think that videos that with 100% width would automatically resize to the surrounding container. Well, that is not the case. Surprisingly, Youtube does non automatically have a responsive embed code.

The prepare was actually quite elementary. Here's how to make a youtube video mobile:

You will need to wrap the responsive youtube embed code with a div and specify a fifty% to lx% padding bottom. Then specify the child elements (iframe, object embed) 100% width, 100% acme, with absolute position. This will strength the embed elements to aggrandize fullwidth automatically. Awesome! Exactly what we need.

Start you will need to add the following to your style sheet.

CSS

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

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

Adjacent, edit add together some HTML around your embed code. Note: this responsive youtube embed code has been updated in 2020 to be more compliant and follow best practices for embedding Youtube videos for responsive design.

HTML

Now, if the responsive YouTube embed worked, your videos should be responsive and ready to view on Tablets and Mobile devices.

Responsive YouTube Video Embed Instance

For a working example, check out our homepage for embeded reponsive videos.

We have been exploring different means to embed youtube videos for responsive design. Bank check out our case study for O'neill surfing, which uses Vimeo videos to embed responsive videos that autoplay.

Avex is an NYC Digital agency, that focuses on creating amazing websites and engaging content. Learn more.

Update: I was asked to write an article for .Net Magazine nearly the Responsive Youtube Embed and how to make YouTube Videos Responsive. The article is more depth, suggesting some alternatives for embedding responsive videos in your web designs. Cheque information technology out in issue # 247, available October 8th 2013.

Update 12/15/2016: This article has been updated to improve the quality since information technology was published. As well, the article mentioned above has also been released on CreativeBloq, on Responsive Youtube Embed.

Update 08/24/2020: This article was originally published in 2012 and has been updated to include supporting data.