Dynamic CSS Resizing of Embeded YouTube Videos

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!