WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
YouTube Videos strange artifacts and missing buttons (9 posts)

  1. Jeff
    Member
    Posted 1 year ago #

    WP 3.5, latest Jetpack release. Embedding YouTube videos:

    Jetpack has a feature where all you do is post the youtube URL in a page/post and it embeds it and makes it the full width of your page.

    Please watch this video with sound and notice the strange behavior's I'm getting in Youtube videos that I have posted. Here is the WordPress page with the videos on it.

    On these PC browsers, I get the following:
    Chrome: artifacts and jumpy time cursor and title bar.

    Firefox, Safari: buttons don't all display (change quality, volume, play/pause).

    IE 9 - All work fine
    Any idea what's going on here?

    The video on this page does not suffer from the Chrome issues. This was not a video I created. But the same missing buttons occurs in Firefox and Safari.

    Thanks in advance for any help.
    Jeff

    http://wordpress.org/extend/plugins/jetpack/

  2. Jeff
    Member
    Posted 1 year ago #

    Update: the artifacts and bouncing play bar and title bar are related to Jetpack Shortcode Embeds. If I disable Shortcode Embeds, those errors in Chrome go away.

    However, the missing buttons problem is still happening on the other browsers.

    Also, if I disable Shortcode Embeds, the shortcode on this page does not work. That is, if I simply put the URL of a youtube video in, it will embed it fine. If I use the shortcode, it will not embed and simply display the shortcode text in the post. If I turn on Shortcode Embed, the video will be full allowable width of my page. If I disable that, the video will be 500px wide or so.

    What's going on here?

  3. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    First of all, thank you so much for posting a video about the issue. It helps a lot!

    Since you have disabled Jetpack Shortcodes, the videos look good in Chrome for me too now.

    I checked Firefox and Safari, but I couldn't reproduce any of the issues you reported. It seems to work fine on my end.

    I also tried to reproduce the problems on a test blog of mine, by activating Jetpack Shortcodes, but everything worked properly.

    Could you check which version of Flash is running on your computer? It might be what's causing the issue.
    You can also check this by trying to reproduce the issue on another computer, if you can.

    Let me know how that goes!

  4. Jeff
    Member
    Posted 1 year ago #

    Hi Jeremy,
    I didn't think about Flash. I cross posted this on the iThemes member forums because I wasn't sure if it was a theme or plugin issue. One member had a similar setup as me and did NOT have those same problems in Chrome.

    I'll check the flash version and update it in the morning to see if that changes it.

    This makes sense though... because it happened on my laptop, my desktop, and my wife's laptop... but not on my Lubuntu laptop using Chrome.

    The problem with the 500px wide embed in my 2nd post above was related to the theme.

  5. Jeff
    Member
    Posted 1 year ago #

    Well Jeremy, that wasn't the fix for the Chrome issue. I thought it might had been.

    I was running Flash player 11.5.31.137 and upgraded to the latest (11.5.502.146) and it did fix the missing controls in Firefox and Safari but it did not fix the bouncing artifact strangeness of Chrome.

    I'm out of ideas... I'll post to Adobe to see what they think.

  6. Jeff
    Member
    Posted 1 year ago #

    Jeremy - it was suggested to me that I change the iframe code that Jetpack uses and that did the trick. So it seems like something in the way Jetpack displays the video is causing it.

    BTW, this wasn't happening on just this site. It happens for me on all my sites that have Jetpack enabled.

    See this post to explain it.

    I changed the Jetpack iframe code from this:
    < iframe src="http://www.youtube.com/embed/A5wQ9p6d9xs?version=3&rel=1&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent" height="390" width="640" frameborder="0">

    to this
    < iframe src="http://www.youtube.com/embed/A5wQ9p6d9xs" height="390" width="640" frameborder="0">

    And that fixed the Chrome artifacts issue I was having. Any ideas?

  7. Jeff
    Member
    Posted 1 year ago #

    One more update. This is a post from WP developer Chris Jean:

    I ended up able to recreate the issue. I had to use a system that was running Windows 7 natively rather than through a virtual machine.

    I then created this test page to help me narrow down the exact problem. The only one that would recreate the issue was the last one, which adds the wmode=transparent part of the URL. This part of the URL is quite critical as it prevents Flash from always overlaying all the content of the site (such as drop-down menus), so simply removing it isn't a very good option.

    I was curious why this would cause an issue and why I had to run Windows 7 natively, which got me thinking about hardware acceleration, something that doesn't work very well in virtual machines. This was the key.

    I disabled page acceleration in about:flags in Chrome, restarted, but the problem persisted. I then ran Chrome from the command line as "chrome.exe --disable-accelerated-compositing" to fully disable the acceleration, and this made the problem disappear.

    So, is this a Jetpack issue? Kind of, in that it is triggering the issue through the use of the wmode option. The true root issue is a bug in the current release of Chrome for Windows 7. Chrome bundles Flash into it, so upgrading/downgrading Flash on the system won't make any difference. I searched around for confirmation on this bug, and I found nothing. I should note that I haven't tested using a development build of Chrome to see if the next release fixes this issue (I can't really change much about the configuration of this system).

    This is one of those unfortunate situations where the true cause is a browser bug, and there is little that can be done to address this other than waiting for the browser to fix the issue.

  8. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Chris seems to have found the source of the problem, and your tests confirmed it.

    The wmode=transparent parameter is indeed important; if you remove it, you might experience overlay issues with other elements on your site, such as the Admin bar.

    I am afraid the only solution is to remove this parameter from your embed codes, until Chrome fixes the issue.

  9. Jeff
    Member
    Posted 1 year ago #

    Yup. I sent a bug report to Google and their first response, after telling them it was recreated by 4 users on 7 computers was.... reinstall Chrome.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic