WordPress.org

Ready to get started?Download WordPress

Forums

YouTube
YouTube oEmbed auto-resizes to the wrong size (24 posts)

  1. Alison Barrett
    Member
    Posted 3 years ago #

    Lately I've been having the same problem across multiple browsers and multiple WP blogs (all running 3.1.3 or 3.1.2) with the auto-embed/oEmbed functionality. Any YouTube video that's embedded this way is displayed at a size that is just slightly too wide. This results in thin black bars on the left and right of the video, and happens with videos that are 16:9 or 4:3 aspect ratio.

    Examples can be seen here: http://www.canopyco.com/blog/

    Even when using the [embed] shortcode and specifying a width and height, that only defines the maximum width & height and still automatically sizes the video. I'm not sure if this is a YouTube/oEmbed problem or a WP problem.

    Anyone else experiencing this? Anyone have a fix?

  2. azn137
    Member
    Posted 2 years ago #

    I have the same exact problem, and it's been going on for a few iterations of WP now. Very annoying.

    I took a look at your website, it looks fine to me (as far as I can tell). Take a look at mine, 2 videos, one has the correct size of 600px, the other is out of whack: http://tambnguyen.com/20110727/julia-roberts-makeup-ads-banned-in-uk-for-too-much-photoshop/

    Here's an example of both Vimeo and Youtube videos are embedded. Again, Vimeo looks perfect, while Youtube looks jacked: http://tambnguyen.com/20110724/a-few-fashion-videos-of-miss-universe-albania-angela-martini/

    I use the method of inserting just a text-only link.

  3. esmi
    Forum Moderator
    Posted 2 years ago #

    Have you tried:

    - deactivating all plugins to see if this resolves the problem. If this works, re-activate the plugins one by one until you find the problematic plugin(s).

    - switching to the Twenty Eleven theme to rule out any theme-specific problems.

    - resetting the plugins folder by FTP or PhpMyAdmin. Sometimes, an apparently inactive plugin can still cause problems.

  4. azn137
    Member
    Posted 2 years ago #

    zOmg thank you esmi the Theme Diva! I found it.

    Surprise surprise, it's the WordPress' Jetpack plugin that's messing it up. Once the minute I turned it on, BAM! it broke.

    How do I fix this?

  5. esmi
    Forum Moderator
    Posted 2 years ago #

    Really?! Does it still happen if you use the Twenty Eleven theme? If so, this would be worth reporting as a bug in the plugin.

  6. azn137
    Member
    Posted 2 years ago #

    Actually, without the plugin, it works perfectly with my theme. I've checked all the theme files and searched for "embed" but nothing came up, so I know it has nothing to do with my theme.

    I'll dive into the youtube.php to see what I can find....

  7. azn137
    Member
    Posted 2 years ago #

    Hmm... this is a jungle that might take me a while to go through. It looks like someone did the math wrong, that's my best guess at the moment.

    My media max width is set to 600px, and this is the HTML code that was returned:

    <p><object width="600" height="475"><param name="movie" value="http://www.youtube.com/v/sfAPT1_0TDg?version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/sfAPT1_0TDg?version=3" type="application/x-shockwave-flash" width="600" height="475" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
    <p><span style='text-align:center; display: block;'><object width='640' height='390'><param name='movie' value='http://www.youtube.com/v/Ei6JvK0W60I?version=3&rel=1&fs=1&showsearch=0&showinfo=1&iv_load_policy=1'/><param name='allowfullscreen' value='true'/><param name='wmode' value='opaque'/><embed src='http://www.youtube.com/v/Ei6JvK0W60I?version=3&rel=1&fs=1&showsearch=0&showinfo=1&iv_load_policy=1' type='application/x-shockwave-flash' allowfullscreen='true' width='640' height='390' wmode='opaque'></embed></object></span></p>

    How do we report a bug?

  8. esmi
    Forum Moderator
    Posted 2 years ago #

    Post it via http://wordpress.org/tags/jetpack?forum_id=10#postform That should ensure that it is tagged & highlighted correctly to attract the right attention.

  9. azn137
    Member
    Posted 2 years ago #

  10. astromono
    Member
    Posted 2 years ago #

    This is a recurring issue indeed. Whenever I use oEmbed the video is displayed with the proper width (as I have it in the media settings of the dashboard), but the height of the video is weird, so that the video isn't shown completely.

    I must mention that I didn't put a value under the "height" in the media settings of the dashboard. This is because I thought the oEmbed would adjust the height to whatever the width was just in case the video's ratio was 4:3 instead of 16:9

  11. azn137
    Member
    Posted 2 years ago #

    Yup, I have the "height" in media setting as 0 as well. It doesn't look like anyone's working on this though. Meh, WP's built-in works just well for now, and I'm fine with it not making a few extra PHP function calls.

  12. zissou
    Member
    Posted 2 years ago #

    Same here - using oEmbed the video is displayed with the proper width but doesn't seem to account for the 35px height of the YT player bar - not sure if this is an Oembed, WP or youtube issue though but someone needs to sort it - I've noticed it on at least 3 different sites today!

    http://zissou.com/2011/10/30/django-mango-shows-how-its-done/

  13. pdame
    Member
    Posted 2 years ago #

    Likewise, I have the same issue. As Zissou noted, the auto-selected height is simply not accounting for the 35px height added by the YouTube player bar.

    I'd use the <iframe> embed offerred by YouTube but then it won't resize automatically for mobile via WPTouch.

    If anyone knows of a solution, please share it as I'd like video tutorial series to finally appear properly... http://learningdslr.com/category/back-to-basics/

  14. It's YouTube having changed things. Which is annoying.

    Try using Viper's Video Quicktags (or the shortcodes in Jetpack) which seem to handle this a little better.

  15. azn137
    Member
    Posted 2 years ago #

    just disable jetpack's shortcode and you should be okay for now. although, if you'd embedded those things with special parameters, obviously they'll break.

  16. pdame
    Member
    Posted 2 years ago #

    I don't want to set a fixed height and width as parameters as my goal is to allow the mobile theme to adjust the size on its own as needed (i.e. for the given device screen size).

    I guess I'll have to test more to see if WPTouch is smart enough to ignore those directives.

  17. webleo
    Member
    Posted 2 years ago #

    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:

    http://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.

  18. pdame
    Member
    Posted 2 years ago #

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

  19. technabob
    Member
    Posted 2 years ago #

    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).

  20. azn137
    Member
    Posted 2 years ago #

    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

  21. technabob
    Member
    Posted 2 years ago #

    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 16x9 content from YouTube embeds.

    I'd think a filter similar to this:
    http://www.bsdeluxe.com/removing-the-height-from-wordpress-embeds/
    or
    http://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.

  22. technabob
    Member
    Posted 2 years ago #

    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.

  23. technabob
    Member
    Posted 2 years ago #

    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.

  24. technabob
    Member
    Posted 2 years ago #

    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 16x9 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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic