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

lucasfbustamante's Avatar


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


    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.


  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:
    function debouncer( func , timeout ) {
       var timeoutID , timeout = timeout || 1000;
       return function () {
          var scope = this , args = arguments;
          clearTimeout( timeoutID );
          timeoutID = setTimeout( function () {
              func.apply( scope , 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',
            slidesSpacing: 0,
            loop: false,
            loopRewind: true,
            numImagesToPreload: 3,
            video: {
              autoHideBlocks: true,
              youTubeCode: '<iframe src="" width="460" height="310" frameborder="0" allowfullscreen></iframe>'
            autoScaleSlider: true,
            autoScaleSliderWidth: 460,
            autoScaleSliderHeight: 310,
            /* size of all images */
            imgWidth: 460,
            imgHeight: 310
        var slides = '';
        if ($(window).width() < 500) {
            // Mobile
            $(videos).each(function() {
                slides += '<iframe src="'+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="'+this+'/mqdefault.jpg" data-rsVideo="'+this+'" />';
        configRoyalSlider['slides'] = slides;


  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


? 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