Although there are great jQuery plugins available, sometimes a simple little script will do the job just as well. In this case, I would like to share the JavaScript that is being used in the WordPress framework theme Opus Primus for displaying videos that fill the entire width of the content area.

Here is the code:

jQuery( document ).ready( function( $ ) {
    /** Note: $() will work as an alias for jQuery() inside of this function */

    var video_selector = $('.format-video embed, .format-video iframe');

    /** Get the initial width and height values */
    var embed_width = video_selector.attr('width');
    var embed_height = video_selector.attr('height');

    /**
     * Find the ratio between the height and the width to recalculate the height
     * of the embedded video
     */
    var embed_ratio = embed_height / embed_width;

    /**
     * Change the embed / iframe video to use the full width of the post content
     */
    video_selector.attr('width','100%');

    /** Get the new width value as a number and replace the 100% value */
    var new_width = video_selector.width();
    video_selector.attr('width', new_width );

    /**
     * Calculate the new height by multiplying the new width times the original
     * ratio. Then change the embed / iframe video height to the new height.
     */
    var new_height =  new_width * embed_ratio;
    video_selector.attr('height', new_height);

} );

The comments fairly explain the ideas being applied. Simply stated:

  • Get the width and height of the original video
  • Calculate the aspect ratio based on those values
  • Find the HTML class container width and apply it to the video
  • Apply the calculated aspect ratio to the video height

In general this will work under most any circumstance, although the sample above is specifically used for WordPress Post-Format: Video posts; the key is the value(s) used in the video_selector variable.