Skip to main content

Adding support for third-party video player

Step 1: initialize slider and save its object. (If you're using WordPress version you may skip this step)

<div class="royalSlider rsDefault">
  <a class="rsImg" href="cover-image-1.jpg" data-rsVideo="my-video-1.mp4"></a>
  <a class="rsImg" href="cover-image-2.jpg" data-rsVideo="my-video-2.mp4"></a>
</div>
var slider = $('.royalSlider').royalSlider({
    // options...
}).data('royalSlider');

Step 2: use rsOnCreateVideoElement event to generate HTML markup for your video. In this event you may change value of slider.videoObj to your desired HTML code of video player. It can be any element, for example <video> or <iframe>:

slider.ev.on('rsOnCreateVideoElement', function(e, url) {
        // url - path to video from data-rsVideo attribute
        // slider.videoObj - jQuery object that holds video HTML code
        // slider.videoObj must be IFRAME, VIDEO or EMBED element, or have class rsVideoObj
        slider.videoObj = $('<h1>Hello world. You should put here code for video player. It can be HTML5 video tag, iframe, embed, whatever. Video URL:' + url + '</h1>');
});

You may also need to add rsNoDrag CSS class to video - it disables slider mouse drag feature over the corresponding element.

After video is closed, the slider will automatically remove its element DOM. If you want to do something before it gets removed, listen for rsOnDestroyVideoElement event.

slider.ev.on('rsOnDestroyVideoElement', function(e) {
        // slider.videoObj - jQuery object that holds video HTML code
});

Example of usage in WordPress version of slider:​

Add the code below to your theme functions.php. It modifies markup of player (the content that you see after you click play button). Instead of <h1>Hello world. You should put here your code for video player. Video URL is:' + url + '</h1>, put markup of your player, for example <iframe src="'+url+'" width="400" height="300"></iframe> (url is a Video URL string that you enter in edit slide window).

// new_rs_after_js_init_code action is available since v3.1.7.
function add_additional_rs_code() {
    ?>
    var slider = $('.royalSlider').data('royalSlider'); 
    slider.ev.on('rsOnCreateVideoElement', function(e, url) {
            // url - path to video from data-rsVideo attribute
            // slider.videoObj - jQuery object that holds video HTML code
            // slider.videoObj must be IFRAME, VIDEO or EMBED element, or have class rsVideoObj
            
            slider.videoObj = $('<h1>Hello world. You should put here your code for video player. Video URL is:' + url + '</h1>');

    });


    <?php
}
add_action('new_rs_after_js_init_code', 'add_additional_rs_code');