How can I force oEmbed to display fixed height & width dimensions?

Question

When you’re referring to using oEmbed codes, I’m assuming that you’re referring to WordPress’ ability to take a URL to media (such as one from YouTube) and automatically embed that into a post.

If that’s the case, then you can take advantage of the embed_oembed_html hook that WordPress provides.

Here’s how you can do it with a custom function:

function example_custom_oembed_dimensions($html, $url, $args) {

    // Set the height of the video
    $height_pattern = "/height=\"[0-9]*\"https://wordpress.stackexchange.com/";
    $html = preg_replace($height_pattern, "height="560"", $html);

    // Set the width of the video
    $width_pattern = "/width=\"[0-9]*\"https://wordpress.stackexchange.com/";
    $html = preg_replace($width_pattern, "width="340"", $html);

    // Now return the updated markup
    return $html;

} // end example_custom_oembed_dimensions
add_filter('embed_oembed_html', 'example_custom_oembed_dimensions', 10, 3);

You mention that you’re using a consistent width and height for media across your site, but you’re not interested in using the Media Settings page.

For consistency, you can programmatically force the values in the Media Settings and them use them in filters throughout your work.

For example, first we need to set the media size:

function example_force_media_size() {

    if(get_option('embed_size_w') != 560) {
        update_option('embed_size_w', 560);
    } // end if

    if(get_option('embed_size_h') != 340) {
        update_option('embed_size_h', 340);
    } // end if

} // end example_force_media_size
add_action('init', 'example_force_media_size');

Now, whenever anyone tries to overwrite those settings in the Media Settings page, this function will fire and force the values.

Next, you can retrieve those values and then use them when embedding your media:

function example_custom_oembed_dimensions($html, $url, $args) {

    // Find the height value, replace it with Media Settings value
    $height_pattern = "/height=\"[0-9]*\"https://wordpress.stackexchange.com/";
    $height = get_option('embed_size_h');
    $html = preg_replace($height_pattern, "height="$height"", $html);

    // Find the width value, replace it with Media Settings value
    $width_pattern = "/height=\"[0-9]*\"https://wordpress.stackexchange.com/";
    $width = get_option('embed_size_w');
    $html = preg_replace($width_pattern, "width="$width"", $html);

    // Now return the updated markup
    return $html;

} // end example_custom_oembed_dimensions
add_filter('embed_oembed_html', 'example_custom_oembed_dimensions', 10, 3);

The first function may be all that you need, but forcing the values for the Media Settings could make it easier to write custom filters around other types of media, as well.

Related Posts: