Double touch to view youtube video on mobile (autoplay problem)

lucasfbustamante's Avatar

lucasfbustamante

23 Nov, 2017 01:05 PM

When I'm on mobile, I have to touch "play" button twice to play the video.

The first "Play" button is Royal Slider's, and when I touch it, it loads the Youtube embed code but don't start the video, instead it shows Youtube's "play" button, I recorded a video of the problem:

video autoplay mobile

On desktop it works fine. It seems Youtube prevents autoplay on mobile, but is there any way to bypass it?

  1. 1 Posted by lucasfbustamant... on 23 Nov, 2017 01:52 PM

    lucasfbustamante's Avatar

    Same thing happens with Vimeo:
    vimeo autoplay problem mobile

  2. Support Staff 2 Posted by Dmitry Semenov on 23 Nov, 2017 02:03 PM

    Dmitry Semenov's Avatar

    Hello,

    Videos on mobile devices do not support autoplay with sound, that's why this is happening.

    You may add <iframe> directly into the content of slides, but there might be performance issues and touch events are blocked over iframes on certain devices.

    Dmitry

  3. 3 Posted by lucasfbustamant... on 23 Nov, 2017 04:08 PM

    lucasfbustamante's Avatar

    I see.

    Since this problem is expected to happen on mobile, do you think the slider could provide a solution for this?

    Perhaps not the most elegant solution, but this is what I did:

    /**
    *   Auxiliar function to throttle a function (prevent resize run on every pixel)
    *   Source: https://stackoverflow.com/a/4298672/2056484
    */
    function debouncer( func , timeout ) {
       var timeoutID , timeout = timeout || 1000;
       return function () {
          var scope = this , args = arguments;
          clearTimeout( timeoutID );
          timeoutID = setTimeout( function () {
              func.apply( scope , Array.prototype.slice.call( args ) );
          } , timeout );
       }
    }
    
    /**
    * Insert Youtube videos using .rsImg or iframe, depending if it's desktop or mobile
    */
    $(window).on('load resize', debouncer(function (e) {
        console.log('load or resize');
        var videos = ['ZDlVD-ZtfWg','S4EKBie0L34','zlJx2ar3xH4'];
        var configRoyalSlider = {
            arrowsNav: true,
            fadeinLoadedSlide: true,
            controlNavigationSpacing: 0,
            controlNavigation: 'none',
            keyboardNavEnabled: true,
            imageScaleMode: 'fill',
            imageAlignCenter:true,
            slidesSpacing: 0,
            loop: false,
            loopRewind: true,
            numImagesToPreload: 3,
            video: {
              autoHideArrows:true,
              autoHideControlNav:false,
              autoHideBlocks: true,
              youTubeCode: '<iframe src="https://www.youtube-nocookie.com/embed/%id%?autoplay=1&modestbranding=1&showinfo=0&rel=0&iv_load_policy=3" width="460" height="310" frameborder="0" allowfullscreen></iframe>'
            },
            autoScaleSlider: true,
            autoScaleSliderWidth: 460,
            autoScaleSliderHeight: 310,
    
            /* size of all images http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/adding-width-and-height-properties-to-images */
            imgWidth: 460,
            imgHeight: 310
        }
        var slides = '';
        if ($(window).width() < 500) {
            // Mobile
            $(videos).each(function() {
                slides += '<iframe src="https://www.youtube-nocookie.com/embed/'+this+'?autoplay=0&modestbranding=1&showinfo=0&rel=0&iv_load_policy=3" width="460" height="310" frameborder="0" allowfullscreen style="max-width: 100%;max-height: 310px;"></iframe>'
            })
        } else {
            // Desktop
            $(videos).each(function() {
                slides += '<img class="rsImg" src="https://img.youtube.com/vi/'+this+'/mqdefault.jpg" data-rsVideo="http://www.youtube.com/watch?v='+this+'" />';
            })
        }
        configRoyalSlider['slides'] = slides;
        $('#depoimentos-slider').royalSlider('destroy').empty().royalSlider(configRoyalSlider);
    }));
    

    Result:
    solution

  4. Support Staff 4 Posted by Dmitry Semenov on 23 Nov, 2017 09:48 PM

    Dmitry Semenov's Avatar

    You can do that, but as I told previously - loading multiple iframes at once isn't too performant, and swiping over videos will not work.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac