Scale embedded videos in wordpress

WordPress allows really simple embedding of Youtube or Vimeo Videos.

Just paste the video url to your article and the visitors see the embedded video.

To make these videos even more attractive I want to scale them to the width of the article.

1. download jQuery fitWids

There’s a nice jQuery plugin that does this job: jquery fitVids

Download the file and place it somewhere in your theme directory eg. yourtheme/javascripts/jquery.fitvids.js

2. load the Javascript file

Enqueue the Javascript file somewhere in your functions.php

wp_enqueue_script('fitvids', get_bloginfo('template_url').'/javascripts/jquery.fitvids.js', array('jquery'), '1.0', true);

3. wrap all videos in a container

Add this to your functions.php

function add_video_wrapper($content) { 
    $content = str_replace('<object', '<br /><br />
<div class="videoWrapper"><object', $content); $content = str_replace('</object>', '</object></div>
<p>

<p>', $content);
   $content = str_replace('<embed', '<br />
<br />
<div class="videoWrapper"><embed', $content);
   $content = str_replace('</embed>', '</embed></div>
<p>

<p>', $content);
 $content = str_replace('<iframe', '<br />
<br />
<div class="videoWrapper"><iframe', $content);
 $content = str_replace('</iframe>', '</iframe></div>
<p>

<p>', $content);
   return $content;
}

add_action('the_content', 'add_video_wrapper');

4. run fitVids on all video wrappers

add the following lines to your main javascript file:

jQuery(document).ready(function($) {   
        jQuery(".videoWrapper").fitVids();
});

5. adjust videos to hide below fixed navigations or headers (optional)

This step doesn’t really belong to the steps above, but it’s often really useful when embedded flash videos overlay your headers or menus.

The following piece of code adds the “wmode=opaque” option to embedded videos. Just add it to your functions.php again.

function add_video_wmode_transparent($html, $url, $attr) {
    if ( strpos( $html, "<embed src=" ) !== false )
    { return str_replace('</param><embed', '</param><param name="wmode" value="opaque"></param><embed wmode="opaque" ', $html); }
    elseif ( strpos ( $html, 'feature=oembed' ) !== false )
    { return str_replace( 'feature=oembed', 'feature=oembed&wmode=opaque', $html ); }
    else
    { return $html; }
}
add_filter( 'embed_oembed_html', 'add_video_wmode_transparent', 10, 3);

Thanks to Crantea Mihaita for his blog post about wmode transparent in embedded videos.

WordPress allows really simple embedding of Youtube or Vimeo Videos.

Just paste the video url to your article and the visitors see the embedded video.

To make these videos even more attractive I want to scale them to the width of the article.

1. download jQuery fitWids

There’s a nice jQuery plugin that does this job: jquery fitVids

Download the file and place it somewhere in your theme directory eg. yourtheme/javascripts/jquery.fitvids.js

2. load the Javascript file

Enqueue the Javascript file somewhere in your functions.php

wp_enqueue_script('fitvids', get_bloginfo('template_url').'/javascripts/jquery.fitvids.js', array('jquery'), '1.0', true);

3. wrap all videos in a container

Add this to your functions.php

function add_video_wrapper($content) { 
 $content = str_replace('<object', '<br /><br />
<div class="videoWrapper"><object', $content); $content = str_replace('</object>', '</object></div>
<p>

<p>', $content);
   $content = str_replace('<embed', '<br />
<br />
<div class="videoWrapper"><embed', $content);
   $content = str_replace('</embed>', '</embed></div>
<p>

<p>', $content);
 $content = str_replace('<iframe', '<br />
<br />
<div class="videoWrapper"><iframe', $content);
 $content = str_replace('</iframe>', '</iframe></div>
<p>

<p>', $content);
   return $content;
}

add_action('the_content', 'add_video_wrapper');

4. run fitVids on all video wrappers

add the following lines to your main javascript file:

jQuery(document).ready(function($) {   
        jQuery(".videoWrapper").fitVids();
});

5. adjust videos to hide below fixed navigations or headers (optional)

This step doesn’t really belong to the steps above, but it’s often really useful when embedded flash videos overlay your headers or menus.

The following piece of code adds the “wmode=opaque” option to embedded videos. Just add it to your functions.php again.

function add_video_wmode_transparent($html, $url, $attr) {
    if ( strpos( $html, "<embed src=" ) !== false )
    { return str_replace('</param><embed', '</param><param name="wmode" value="opaque"></param><embed wmode="opaque" ', $html); }
    elseif ( strpos ( $html, 'feature=oembed' ) !== false )
    { return str_replace( 'feature=oembed', 'feature=oembed&wmode=opaque', $html ); }
    else
    { return $html; }
}
add_filter( 'embed_oembed_html', 'add_video_wmode_transparent', 10, 3);

Thanks to Crantea Mihaita for his blog post about wmode transparent in embedded videos.