Slider Revolution WP
09.27.2016
Continuous Video Reel inside Lightbox
This article will show how you can automatically play the next video inside the lightbox after the previous video has finished playing.IMPORTANT: This workaround is only applicable to HTML5 Video
The idea here is to hide the lightbox navigation arrows, and force the user to watch the currently selected video. Then when the video that’s currently being viewed ends, the next video from your grid will be played, and this will continue until the user closes the lightbox.
1. Setup your grid to open HTML5 videos inside the lightbox
Click the link below to learn how you can open HTML5 Video inside the lightbox:
2. Set the "Gallery Mode" to "All Items"
3. Set the "Navigation Arrows" to "On"
4. Add the following code to the "API/JavaScript" section
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
(function() { var timer, vid; jQuery('body').on('click', '.esgbox', function() { clearTimeout(timer); timer = setTimeout(addEvent, 500); }).on('click', '.esgbox-close, esgbox-overlay', function() { clearTimeout(timer); vid.off('ended'); vid = null; }); function addEvent() { vid = jQuery('.esgbox-overlay').find('video').removeAttr('loop').on('ended', onEnded); } function onEnded() { jQuery('.esgbox-next').trigger('click'); timer = setTimeout(addEvent, 500); } })(); |
5. Finally, add the following custom CSS inside the Item Skin Editor
|
1 2 3 |
.esgbox-nav {visibility: hidden !important} |
