Mobile WP YouTube Lyte; no-one said it would be easy!

WP YouTube Lyte and mobile, I must be honest, it is not an easy marriage. Light YouTube Embeds focuses on optimizing performance by displaying a dummy player which takes less then a tenth of what a normal YouTube embed requires. Only when clicking on that dummy player, the real YouTube embed is loaded and auto-played. Simple and efficient, no?

Mobile is an whole other ballgame. For starters, there’s no autoplay on YouTube mobile embeds. At all, because Apple prohibits autoplay in HTML5 video and browsers on Android seem to agree. So the trick with the dummy player does not work (unless you would accept users having to click twice) and as a consequence, WP YouTube Lyte on mobile loads the (mobile) embed straight away.

But that’s not all; for audio-only to work, auto-hide has to be disabled (as the bottom controls are the only player elements that remain visible) but that despite setting autohide=0&controls=1, controls still remain hidden in mobile YouTube embeds, rendering the audio-only player UI useless, as a consequence of which WP YouTube Lyte has to show the full video on mobile. And YouTube playlists on mobile are known to be broken as well, one can only hope this is being worked on by YouTube.

And then one week ago a user posted about yet another mobile-specific problem on the wordpress.org WP YouTube Lyte supportforum; when rotating your smartphone or tablet, the size of the embedded video did not adjust. The reason in a nutshell; while LYTE (the dummy player) is responsive, the YouTube iframe-embed that is loaded on mobile is not. To solve this, I added an orientationchange event handler (WebKit-only to my disappointment, although I do have an alternative approach that I might introduce at a later stage) in version 1.3.3 which I released earlier today, re-requesting the embed when the orientation changes.

The conclusion; WP YouTube Lyte works on mobile, but it is not the most elegant of solutions at this particular stage. So in the spirit of full disclosure; if desktop & performance are key, then WP YouTube Lyte remains one of the best solutions for YouTube on WordPress out there, but if your main target audience is mobile web, you should at least be aware of these limitations (some of which also exist outside of WP YouTube Lyte).

5 thoughts on “Mobile WP YouTube Lyte; no-one said it would be easy!

  1. Pieter

    This is indeed complex. We solved this by listening for the ‘resize’ event and setting the width and height of the wrapper around the element to a fixed size.
    We do have a special use case: our videos are encoded in 4/3 format (a bit squeezed) but need to be stretched to 16/9 when showing them, that’s the reason for some of the code below.

    From our testing we found that if you want a responsive player, you need to read http://webdesignerwall.com/tutorials/css-elastic-videos and then there still are issues on some devices. We ended up setting explicit width and height attributes (calculated values, not really fixed) on the tag and the wrapper div to make it work everywhere. Using “width: 100%” doesn’t always work.

    I think the click to play issue in iOS occurs only when surfing on 3G, not on Wi-Fi since iOS 6. You need to do all handling of the click synchronously to make it work, but this is very hard when you’re doing API/AJAX calls. We removed the placeholder images for mobile devices and immediately show the element there, just like you do.

    Code snippets below:

    // Listen for resize events (called when rotating a device)
    $(window).resize(function() {
    initPlayerDimensions();
    });

    initPlayerDimensions: function() {
    // when one of these elements is present, we know we entered fullscreen
    if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement) {
    var fullscreenWidth = $(document).width();
    this.playerConfig.width = fullscreenWidth; // 'auto' works too but takes the width of the encoded video, also use auto for height then
    // this.playerConfig.height = Math.round(fullscreenWidth*9/16);
    } else {
    this.playerConfig.width = this.mainDiv.width();
    }

    this.playerConfig.height = Math.round(this.playerConfig.width*9/16);

    this.fixVideoBoxDimensions();
    },

    fixVideoBoxDimensions: function() {
    $('.video-box',this.mainDiv).css({
    width: this.playerConfig.width,
    height: this.playerConfig.height
    });
    },

    Reply
    1. frank Post author

      Interesting, but I’m kind of wary of the resize-event (based on my own small experiments but also on what I read here and here).

      The matchMedia event handler just seems like a better fit after all, or are there downsides to that as well that you know of?

      Reply
  2. Pieter

    It did seem to work in our tests, although I must admit that the Android testing part was rather limited and we mainly focused on iOS 5 and 6.

    Reply
  3. Cindy Seipel

    I hope you find this question-didn’t know the best place to post. I’m using your youtube lyte plugin on a client’s website and I’m getting a strange error. A player window is showing above the verbiage I put in and the video code I’ve inserted is displaying properly below the text. When I click on the small player above the text, it gives an error. I don’t know how to get rid of it. The plugin is up to date as far as I can tell. Any clues would be appreciated.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>