Adding support for third-party video player

First of initialize slider as usual (If you're using WordPress version you may skip this step, as this code runs at the footer of your page) and save its object.

var slider = $('.royalSlider').royalSlider({
    // options...
}).data('royalSlider');

There is rsOnCreateVideoElement event, that fires after play button is clicked. Bind it to slider event object and change the value of slider.videoObj to HTML code of video player that you need.

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 to make controls of video player work correct.

After clicking on video close button or before changing of slides, slider will automatically remove video element from 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
});

Please note that rsOnDestroyVideoElement event was added only with RoyalSlider version 9.2.0.

Note that instead of video you may add any other HTML content, for example Google Maps, image magnify, or just some additional info for slide.

JW player integration & working example

I created very basic example of RoyalSlider and JW player integration. This example may contain not the latest versions of JS & CSS files..
Download: jwplayer-royalslider.zip.

Example of usage in WordPress version of slider:

Add 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');

Found a mistake in article? Know how to improve it? Please open support ticket.