Dynamic CSS Resizing of Embedded YouTube Videos

CSS TipsVideo embeds like the ones from YouTube can be valuable to tell a story. Though the built-in options for such videos allow the user to resize the video, it is not dynamic and is more than often a manual (irreversible) process. Say you would like to keep the video at it’s full size in the single post page but display a thumbnail in your sidebar, you can. A simple CSS and Javascript fix for IE would do the trick, here’s how:

Let’s define a “class” called resizevideo with no style.

.resizevideo {}

Add a embed attribute such as below to resize the video’s height.

.resizevideo embed {
height: expression( this.scrollHeight > 186 ? “186px” : “auto” ); /* sets max-height for IE */
max-height: 186px; /* sets max-height value for all standards-compliant browsers */
}

Similarly, set the maximum width.

.resizevideo embed {
max-width: 230px; /* sets max-height value for all standards-compliant browsers */
width: expression(this.width > 230 ? 230: true); /* sets max-width for IE */
}

Note that the height in this example is 186px and width set at 230px, both can be set to the size of your choice; just ensure the width is set with the original aspect ratio in mind, else your video will be out of shape.

Now set the XHTML/PHP in your WordPress theme sidebar to pull content from the video category, in this example the category is “99“, change that to match your sites video category.

  1. <div class=”resizevideo”>
  2. <ul>
  3. <?php
  4. $temp = $wp_query;
  5. $wp_query= null;
  6. $wp_query = new WP_Query();
  7. $wp_query->query(‘showposts=1&cat=99‘.’&paged=’.$paged);
  8. ?>
  9. <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
  10. <li><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></li>
  11. <?php the_content(‘Read more…’); ?>
  12. <?php endwhile; ?>
  13. <?php $wp_query = null; $wp_query = $temp;?>
  14. </ul>
  15. </div>

That is it, now you can embed a video in your post under the video category (in this example its 99) and it will show as a 230px by 186px thumb. For an live example usage visit Faith Freedom Redesign and look at the video in the right sidebar, click the permalink of the post that appears right above the video and you will see the full-size default embed. Enjoy!

Leave a Comments | Trackback | RSS 2.0

  1. 1. lINE h | October 3, 2008 #

    Why do people put videos into a webpage with a result like this?

    The validation result from Faith Freedom Redesigns URL Result: 105 Errors, 10 warning(s).

Have Your Say »

(Required- use your name, not keywords)

(Required- will not be published)

(Optional)

Use SimpleCode while pasting codes.