Show Different Size Youtube Videos on Different Pages

If you click the share link under any Youtube video, you’ll be able to copy a URL for the video like this:

youtube url

You can then paste that URL on its own line in your WordPress text editor and it will display the video in the visual editor and on the front end of your site.

But what size will the video be displayed at?

WordPress will display the video at 500px width as that’s whats coded in the media.php file in the WordPress core.

Unless your theme changes these defaults, which most do using code like this:

if ( ! isset( $content_width ) ) {
    $content_width = 600;
}

But what if you want to change that size for oembed videos which are embedded using a URL?

Then you need to use a filter that’s also applied in the media.php file of WordPress.

The embed_defaults filter can be used to modify the default dimensions for your video’s height and width like this:

add_filter( 'embed_defaults', 'modify_embed_defaults' );
function modify_embed_defaults() {
    return array(
        'width'  => 750, 
        'height' => 375
    );
}

If you only want to change the size of Youtube videos on some pages, you can use conditional statements like this:

add_filter( 'embed_defaults', 'modify_embed_dimensions' );
function modify_embed_dimensions() {
if ( in_category( 'one') ) :
    return array(
        'width'  => 300, 
        'height' => 300
    );
else : return array( 'width'  => 600, 'height' => 600 );
endif;
}

The above PHP code alters the width and height for Youtube videos based on the conditional tag you use. In this case it makes all videos in category one display 300 x 300 and all videos elsewhere, 600 x 600.

Simply add the code to your child themes functions file and change the conditional tag as well as the values for the width and height to suit your own requirements.

Video Demo

This video shows you what happens when you paste the URL to a Youtube video in the text editor of WordPress.

It shows you the video displaying at 500px width. Then at 1600px when code is added, then different sizes on posts in different categories after adding the code to filter the size conditionally is added from above.

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.