WordPress.org

Support

Support » How-To and Troubleshooting » YouTube oEmbed auto-resizes to the wrong size

YouTube oEmbed auto-resizes to the wrong size

  • 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?

Viewing 15 replies - 1 through 15 (of 23 total)
  • 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.

    esmi
    Forum Moderator

    @esmi

    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.

    azn137
    Member

    @azn137

    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?

    esmi
    Forum Moderator

    @esmi

    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.

    azn137
    Member

    @azn137

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

    azn137
    Member

    @azn137

    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?

    esmi
    Forum Moderator

    @esmi

    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.

    azn137
    Member

    @azn137

    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

    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.

    zissou
    Member

    @zissou001

    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!

    Django Mango shows how it’s done

    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/

    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.

    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.

    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.

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘YouTube oEmbed auto-resizes to the wrong size’ is closed to new replies.