How to make video return to 1st slide once ended?

Christian's Avatar

Christian

30 Jan, 2019 09:51 AM

Hi ,

I have RoyalSlider in use for the product images on this page https://www.justfabrics.co.uk/curtain-fabric-upholstery/spice-birch... and you'll see the 4th slide is a video, which uses the Video module. The client has requested for the slider to return to the 1st slide once the video has ended - is this possible?

  1. Support Staff 1 Posted by Dmitry Semenov on 30 Jan, 2019 04:40 PM

    Dmitry Semenov's Avatar

    Hello,

    The plugin has no integration with YouTube API, so you'll need to integrate it to get a video ended event - https://developers.google.com/youtube/iframe_api_reference

    Slider creates iframe element when the play button is clicked, to access it you may use such code:

    var slider = $('.royalSlider').data('royalSlider');
    slider.ev.on('rsOnCreateVideoElement', function() {
      console.log( 'Video element is:', slider.videoObj[0] );
    });
    
  2. 2 Posted by Christian on 07 Feb, 2019 11:53 AM

    Christian's Avatar

    Thanks for this Dmitry, what about if we want to put the video on an infinite loop? Is this possible without the use of introducing the YouTube API?

  3. Support Staff 3 Posted by Dmitry Semenov on 07 Feb, 2019 01:52 PM

    Dmitry Semenov's Avatar

    Yes, YouTube supports loop option https://developers.google.com/youtube/player_parameters#loop

    You can define it in slider JS options like so:

    video: {
      youTubeCode: '<iframe src="https://www.youtube.com/embed/%id%?rel=1&autoplay=1&showinfo=0&loop=1" allowfullscreen frameborder="no"></iframe>'
    }
    
  4. 4 Posted by Christian on 07 Feb, 2019 05:16 PM

    Christian's Avatar

    Hi Dmitry,

    Great thanks for this. I’ve introduced this and it didn’t work initially, however according to this article https://stackoverflow.com/questions/25779966/youtube-iframe-loop-doesnt-work I have to append the &playlist=[VIDEOID] as well, however I’ve tried to do this as per how the ID is defined earlier into the line of code, but it’s not outputting correctly on the front-end (the 2nd instance of %id% in the JS outputs on the front-end as %id%).

    Can you please advise on what I need to correct to get the ID outputting for this 2nd instance please?

  5. Support Staff 5 Posted by Dmitry Semenov on 07 Feb, 2019 05:43 PM

    Dmitry Semenov's Avatar

    You may generate any HTML markup for the video via API, more details at http://help.dimsemenov.com/kb/royalslider-javascript-api/adding-sup...

  6. 6 Posted by Christian on 07 Feb, 2019 05:50 PM

    Christian's Avatar

    Hi Dmitry,

    Not sure you read my last post right. So below is my code

    video: {
      youTubeCode: '<iframe src="https://www.youtube.com/embed/%id%?rel=0&autoplay=1&showinfo=0&loop=1&playlist=%id%" allowfullscreen frameborder="no"></iframe>'
    }
    

    The first instance of %id% outputs the YouTube ID as intended within the slider, but the 2nd one doesn't for some reason. Can you please advise why and how I can fix? See attached screenshot.

  7. Support Staff 7 Posted by Dmitry Semenov on 07 Feb, 2019 06:27 PM

    Dmitry Semenov's Avatar

    Default markup for youTubeCode supports only single %id%, if you need advanced markup generate the video iframe manually as described at http://help.dimsemenov.com/kb/royalslider-javascript-api/adding-sup...

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