After using Hummingbird streaming video not playing properly.

Hi, I've noticed that my embedded video has begun to exhibit an audio lag since running the plugins.
Do you know if this is a common problem> maybe with compression? The audio is not playing in sync with video... its behind.
When deactivated Hummingbird it is working fine. Please help!

  • Adam Czajczyk

    Hello Shane,

    I hope you're well today and thank you for your question!

    I checked your site and I while I do see significant difference between how the video is played directly on YouTube site and how it performs when watched via your site, I must honestly admit that I see absolutely no difference with Hummingbird enabled and disbled on site.

    I tried clearing caches, tried two different browsers, both in regular and incognito mode and on my end it's exactly the same with and without Hummingbird enabled, with the issue still occurring on your site.

    I'm also not sure how/why Hummingibird would be affecting that. The way such embedded video works is that the player script is fired up (it works in user browser) so if anything, that would be affected (most likely by minification) but it does work so that's not the issue. Then, the player, once fired, is actually working in user's browser and is fetching video content (movie data/stream) directly from YouTube servers - so that doesn't even go through your server and is not processed by Hummingbird or its cache. Or, at least, it shouldn't, unless there's some non-standard issue.

    I'm not sure however, about how this all "fits together", I admit. Therefore, I did a simple test and embeded your video on my own test site that's:

    - got Hummingibird disabled
    - has no cache currently enabled of any kind (including server cache)
    - is set with Twenty Seventeen theme (most basic/default WP theme)
    - has no plugins enabled and no Elementor installed.

    I did experience the very same issue there. Upon further investigation I found that even though you are using a direct video link with no additional parameters, when viewed via site it sets some fixed quality that's higher than the one that's automatically detected and set for the movie when I'm viewing it directly on YT site. So I tried to switched that quality in player embeded on my site an suddenly video was playing fine. The same worked for your site as well. However, trying to force that automatic quality discovery via simple YT link didn't work either.

    What did work for me on my setup was actually embedding your YT video directly via YT-provided iframe embed code with additional quality autodiscovery code added, like this:

    <iframe width="560" height="315" src="https://www.youtube.com/embed/npPjVlTrLwg?rel=0&version=3&vq=auto" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

    This particular video is a bit smaller than yours so values of vidth and height parameters might need adjusting. However, when I added that code to my site via "Text" mode of a regular WP Editor (not elementor, but I believe Elementor should have a module that let's you post your own code like that as well), it worked great - even other plugins enabled and the Hummingbird fully enabled with minification and cache.

    Stil, when I changed a theme, the video became sluggish again. Apparently, the point here is when an embed code (I believe elementor is actually "reproducing" YT embed code) is dynamically resized in browser e.g. via CSS.

    Having that said I tried to remove all the "automatic height/width" CSS from my theme and that helped. So I believe this is the real problem. The Hummingibird might be affecting this in that way that it actually caches and minimizes CSS but that only should affect changes made to it.

    I realize that post is somewhat long but I was just writing it during testing, "on the fly" so I'm sorry if it got a bit too complex. The bottom line here is, I believe there's some issue with YT player reacting to certain CSS rules.

    Ultimate soluton on my site was to:
    1. Use YT embed code and set the video size by setting iframe width and height in this code
    2. adding this additional parameter to URL in YT iframe code: &version=3&vq=auto to force quality auto-discovery
    3. Removing all the CSS references to that iframe (that particular one or just all of them) from my theme - rules that set "width", "height" and "max-width"/"max-height" in anyway; so - as a result- I had "raw embed" with fixed size; that worked nicely and fluently played video regardless of the theme used and whether Hummingbird was active or not.

    If you have any additional questions, let me know please.

    Kind regards,
    Adam

  • Shane

    Adam,
    I think I closed it out a bit soon. I understand all the above, but the following. Could you point me to some documentation that explains how I can do this? Thank you
    3. Removing all the CSS references to that iframe (that particular one or just all of them) from my theme - rules that set "width", "height" and "max-width"/"max-height" in anyway; so - as a result- I had "raw embed" with fixed size; that worked nicely and fluently played video regardless of the theme used and whether Hummingbird was active or not.

  • Adam Czajczyk

    Hi Shane

    Could you point me to some documentation that explains how I can do this? Thank you
    3. Removing all the CSS references to that iframe (that particular one or just all of them)...

    I'm afraid there's no docs specific for this other than the general CSS docs. Let me try to explain.

    YouTube (and actually Elementor as well) is using HTML "<iframe>" tag to embed video.

    Like any other tag, it can by styled with CSS. Such CSS usually is added by theme that's currently active on site (though it might also come from Elementor, I'm not quite sure how it is in your case). What I found while testing this on my setup was that if there was CSS in my theme that was setting width, height and max-width values for "<iframe>" tag, it was also affecting video playback.

    By default, size of a player is set "inline" in "<iframe>" tag, here's an example:

    <iframe width="560" height="315" src="https://www.youtube.com/embed/npPjVlTrLwg?rel=0&version=3&vq=auto" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

    Note the "width" and "height" parameters in that code (these are values in pixels). Now, if I used it with a theme that had some generic CSS for "<iframe" tag, e.g. like this:

    iframe {
    width:100%;
    max-width:100%;
    }

    it was causing an "iframe" (and a player too) to be resized by browser to match width of the page. And it was causing playback issues.

    With themes where "iframe" tag was not addressed in CSS that way, player was taking dimensions specified in "iframe" tag and was playing fluently.

    That being said, I'm not entirely sure how exactly to address it in your case but the general rule would be to track down where the CSS rules for "iframe" tag are coming from and try to alternate it. What you could try, however, would be to start with adding a CSS like this to the site (via Appearance -> Customize -> Custom CSS or any other sitewide option for custom css that your theme/elementor gives you):

    iframe {
    width:initial!important;
    max-width:initial!important;
    height:auto!important;
    max-height:auto!important;
    }

    That's not an "elegant" solution, I admit, but worth giving a try as it might be the simplest way to "trick" that "<iframe>" tag.

    Kind regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.