Blog

Embedding Responsive YouTube Videos with CSS Only or jQuery
Posted on March 3, 2014 in CSS, jQuery, YouTube by Matt Jennings

I originally found this info in a post from John Surdakowski. Thank you John!

Below are solutions using CSS and another one using jQuery. This should work in WordPress or another CMS.

HTML and CSS

To make a YouTube video responsive wrap the embed code in a div element with 50% to 60% padding-bottom.

Then, inside of the div element style the iframe, object and embed elements so that are absolutely positioned and their width and height are 100%. Below is the HTML and CSS.

HTML with NO jQuery

CSS with NO jQuery

Responsive YouTube Video Example with NO jQuery

jQuery Example with Updated HTML and CSS

Note: The HTML below does NOT include the div id="content" wrapper element that wraps the YouTube embed iframe. jQuery adds this div id="youtube-responsive-container" wrapper element.

Also a class="youtube-responsive" attribute is added to the iframe to make the YouTube embed responsive. You can see the jQuery JSFiddle here with an example of the responsive YouTube embed. Enjoy!

Updated HTML for jQuery

CSS – Same as Above

jQuery

 

Leave a Reply

To Top ↑