YouTube oEmbed auto-resizes to the wrong size

I think this has to do with the way YouTube answers an oEmbed request.

Paste the following oEmbed request in your address par, and the response you’ll get has a very different height than the one specified here:

https://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DM3r2XDceM6A&maxwidth=300&maxheight=400&format=json

It seems that YouTube is calculating the height of the frame using the aspect ratio and the width, while, just like zissou said, forgetting about the player bar that forces the video to resize which in turn makes the black lines appear.

Yes, YouTube is indeed providing the wrong size! Brutal. Thx Webleo.

Has anyone managed to report this issue to YouTube? I wouldn’t even know where to begin, but this is really an annoying issue.

Is there some way to write a WordPress filter to modify the returned oEmbed value to add the height of the bar as a workaround until they can fix the issue (which I’m sure isn’t high on their priority list).

Well, I wouldn’t say this is completely an error on Youtube’s end, as things work fine of you disable Jetpack’s shortcode embeds. I think we’ll just need to figure out a way to fix it in the file /wp-content/plugins/jetpack/modules/shortcodes/youtube.php

Nah, I’m not using Jetpack at all. I’m using the built-in wordpress embeds in WP 3.3, and get black bars on all 16×9 content from YouTube embeds.

I’d think a filter similar to this:
https://www.bsdeluxe.com/removing-the-height-from-wordpress-embeds/
or
https://wp-snippets.com/654/adjust-vimeo-auto-embed-size/

Would allow us to just modify the height attribute of all your YouTube embeds by adding the height of the bar.

I’m closing in on a solution for this. I just need to figure out a way to create a preg_replace regex which will find all heights and increment them by a set amount (the height of the control bar). I’m struggling a bit with this, but will post back once I can figure it out.

And…. Here ya go. Simply add this to your functions.php and it’ll automatically add 30px height to any oEmbed from YouTube. This is only a workaround until YouTube returns the proper values in its embedded HTML. Please let me know if you encounter any problems, but it seems to successfully handle everything I’ve tested thusfar.

//change_youtube_embed_height
function do_maths($matches) {
	$addheight= 30;//height to add
	$retstring= 'height="'.strval($matches[1]+$addheight).'"';
	return $retstring;
}

function change_ytembed_height($content) {
	$pattern = '(height=[\'\"](\d+)[\'\"])'; //pattern to look for
    if (false !== strpos($content,"youtube")) {
        $content = preg_replace_callback($pattern, do_maths, $content);
    }
    return $content;
}

add_filter('embed_oembed_html','change_ytembed_height');
//end change_youtube_embed_height

The amount of height to add is in the $addheight variable, and the pattern to match is in the $pattern variable, so it should be fairly easy to adapt this to do other math against values coming back in the HTML from oEmbed.

Keep in mind that my solution adds 30px for both the Flash and HTML 5 variants of the player, and the HTML 5 version doesn’t require the additional height. So there’s a minor trade-off of slim black bars above and below content on iPad/iPhone, but it’s still way better than the ugly right and left black bars that make the 16×9 content smaller than it should be.

I think the underlying problem is that YouTube has to account for controller height on the Flash player, and since the HTML5 player is chromeless, they don’t have to there. Unfortunately BOTH players will return the same HTML for the IFRAME through oEmbed, so I don’t think there’s a solution other than for YouTube to settle on a consistent chromeless player for both HTML5 and Flash.