So, I ran into a dilemma. On my posts page, I had a youtube video. The dimensions were 580px by 320px. It was a nice widescreen view of the video. But, I had that same video pulling from the post back to my blog home page. The problem: the video was the same size.

I know, I could have taken a screen capture of the video, created a “a href” to the real post, and the problem would have been solved. But I wanted the user to be able to view the video as a thumbnail on the homepage. If they wanted to, they could go to the post, but if they wanted to watch a smaller video on the home page, then so be it.

The solution: a little jQuery. I needed a script that would reduce the video size from 580px by 320px to something a little smaller, a thumbnail size – 318px by 400px.

jQuery(document).ready(function($) {
$(function() {

var $allVideos = $("iframe[src^='http://player.vimeo.com'], iframe[src^='http://www.youtube.com'], object, embed"),
$fluidEl = $("p");

$allVideos.each(function() {

  $(this)
    // jQuery .data does not work on object/embed elements
    .attr('data-aspectRatio', this.height / this.width)
    .removeAttr('height')
    .removeAttr('width');
});

$(window).resize(function() {

  var newWidth = $fluidEl.width();
  $allVideos.each(function() {

    var $el = $(this);
    $el
        .width(318)
        .height(400 * $el.attr('data-aspectRatio'));

  });

}).resize();

});
});

This jQuery solutions strips the old dimensions and adds the new dimensions I was looking for.

Last hurdle: this script can’t load on every page. If it does, it will reduce the size of every video, including the widescreen video on the posts page.

Solution: only load the script on the page needed, or use WordPress conditional tags: is_home() || is_front() and the list could go on.

To see the example in action: Taste The Movement // The site is just getting started.