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!

We’ll be displaying the total time it took for the page to be generated considering php and mysql queries, and to do that we first need to define a variable inside the wp-config.php in order for that to work. Therefor open your wp-config.php file and add the following line to it:

define( 'SAVEQUERIES', true );

Now that that’s done, we’ll be moving on to the actual calculations and display of the load time information. Typically you’d add the code and have the information be displayed in your theme’s footer.php file. So take a look inside your wordpress theme directory and look for the file called footer.php and open it for edit and in-between the

<?php ?>

tags paste the code snippet below:

if (current_user_can('level_10'))
{
global $wpdb;

// Get the total page generation time
$totaltime = timer_stop( false, 22 );

// Calculate the time spent on MySQL queries by adding up the time spent on each query
$mysqltime = 0;
// if there are indeed mysql queries then
if ($wpdb->queries != null)
foreach ( $wpdb->queries as $query )
$mysqltime = $mysqltime + $query[1];

// The time spent on PHP is the remainder
$phptime = $totaltime - $mysqltime;

// Create the percentages
$mysqlper = number_format_i18n( $mysqltime / $totaltime * 100, 2 );
$phpper = number_format_i18n( $phptime / $totaltime * 100, 2 );

// Output the stats
echo 'Page generated in ' . number_format_i18n( $totaltime, 4 ) . " seconds ( {$phpper}% PHP, {$mysqlper}% MySQL )";
}

At this point you are good to go. Save your footer.php file and refresh any page of your blog.

At the bottom, in the footer section of your theme, you will see the newly added text that will read something like:

Page generated in 0.1352 seconds ( 94.00% PHP, 6.00% MySQL )

Now, consider the fact that the above code will only display this information for users that are admins, and not for regular users. Should you wish to display this information to everyone, simply delete the highlighted lines in the code snipped displayed above.

Also, take into account, that by enabling SAVEQUERIES (Save queries for analysis) in your config.php, there will be a small performance penalty involved, since this is mostly used for debugging purposes (but still…it’s COOL ).

Oh, and by the way, if you’re wondering how to have code with highlighted syntax on your blog, then feel free to checkout the SyntaxHighlighter Evolved plugin.

Thesis 2.0 Video Tutorial – Part 1 – Introduction to the new concepts behind the framework

Also if you’d like to browse the entire tutorial list on the Vimeo website you can do so by navigating to “Seminar – Thesis 2.0 Launch Party“.