Slider Revolution WP
09.27.2016
Play Video Button
This article is now outdated!
A video can now be played easily by adding a button along with Layer Actions.
Play a video that exists on one slide layer by clicking a button from a separate layer.In this example, the video would be hidden from view until the "Play Button" is clicked.
Normally when a video is added to a slider, either the video itself is visible, or the video’s “poster” would show. But if you wanted to hide the video initially, and then add a discrete “Play Video” button to the slide, which would then show and play the hidden video, this can be achieved with custom classes, CSS, and using the slider’s API.
1. Add an HTML5 Video layer to the slide, and then add a second layer for your play button.
2. Make sure the Play button has a lower z-index than the HTML5 Video.
3. Add classes for both layers.
3.1 Add "play-button" Class for the button layer:
3.2 Add "my-video" Class for the video layer:
4. From the slider's main settings page, scroll to the CSS/JavaScript section, and add the following code:
4.1 Custom CSS
|
1 2 3 4 |
.rev_slider .my-video {display: none} .rev_slider .play-button {cursor: pointer} |
4.2 Custom JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
jQuery('body').on('click', '.play-button', function() { var slide = jQuery(this).closest('li'), vid = slide.find('.my-video').show(); vid.find('video')[0].play(); }); // change the "revapi1" parts to whatever api name is used for your slider revapi1.on('revolution.slide.onchange', function() { revapi1.find('.my-video').hide(); }); |
In the above JavaScript, you’ll notice a “revapi1” part in two places. This will need to be altered to represent the api name for your particular slider. To find this name, directly above the “Custom CSS/JavaScript” section, click the “API Functions” section, and you’ll see the “revapi” name for your slider:
