Useful Mix

Something useful every once in a while…


The idea behind responsive videos is to create a box with the proper ratio (4:3, 16:9, etc.), then make the video inside that box stretch to fit the dimensions of the box.

The main trick with elastic videos is to make use of the padding property which is the magic that styles a box with an intrinsic ratio. This is because we’re using it to set the padding to a percentage value, based on the width of the containing block.

First you will need to add the following CSS code to your wordpress theme style sheet. You can do this inside of your theme options, if your themes allows for custom CSS code to be added, or if not, then you will need to use the built-in wordpress editor to add this code at the bottom of your style.css or stylesheet.css default css file associated with your theme (go to Appearance > Editor > Styles (Stylesheet(style.css) or if supported Appearance > Edit CSS option).

CSS code for responsive / elastic Youtube embed

.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;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Second, you will have to take each iframe Youtube video or Vimeo embed code that you want to make responsive and wrap it around with HTML code as illustrated below.

HTML source code for responsive / elastic Youtube embed

</pre>
<div class="video-container"><center>
 <iframe src="http://www.youtube.com/embed/KQ6zr6kCPj8?rel=0" frameborder="0" width="560" height="315"></iframe></center></div>
<pre>

At this point, the responsive YouTube iframe embedings are working, your videos should be responsive / elastic, and ready to view on Tablet devices and Mobile handsets. To verify this works use a test post and copy/paste the code above and hit Preview. Next, click on the browser “Restore Down” button in the top right corner of your screen, and begin re-sizing the browser window so that you can see in real-time how the iframe containing the video adjust to the new canvas dimensions.

Inspiration and much thanks to John from avexdesigns , and the original master  – Thierry –  from alistapart.

If you’ve enjoyed this post and found it useful, spread the love and share the knowledge.

Thank you!

November 26th, 2012

Posted In: CSS, Design, HTML, Tutorials

Tags: , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>