Pause/play video on clicking a layer

⚠️ This article was created for developers!

To be able to follow the steps, you're required to have coding knowledge. If you're not a developer and can't achieve what you're looking for, consider hiring a developer.

Make sure to carefully follow the tutorial and write correct code. We're unable to provide help with custom coding, or the possible issues that are happening because of them.

In this article

Play/pause a video layer

If you have one video layer Pro on your slide, then you could put down a layer next to it, like an image or icon Pro layer to play/pause the video. Write this code into the image/icon layer's clicking event:

var video = jQuery(this.$item).parents('.n2-ss-slider').find('video').get(0);
if(video.paused){
	video.play();
} else {
	video.pause();
}
☝️ Note: Starting a video with JavaScript can be interpreted as autoplaying video by the browser. Which means the browser's special video autoplay handing will apply.

Play/pause the slide background video

For background videos you would need this code instead:

var video = jQuery(this).parents('.n2-ss-slider').find('video').get(0);
if(video.paused){
	video.play();
} else {
	video.pause();
}

This code will identify the video, which is on the same slide, where your layer is, and if the video is paused, it will start to play it, and if it's already playing, it will pause it.

Hiding the layer that started the video

You could also write codes, like start playing the video, when the layer is clicked, and make the layer disappear:

var playbutton = jQuery(this.$item);
var video = playbutton.parents('.n2-ss-slide').find('video').get(0);
playbutton.hide(0);
video.play();

Pause the video on hover

If you just want your video layers to pause on hover you could start with a code like this, which you can place to your theme's PHP file, to the head tag.

<script type="text/javascript">
jQuery(document).ready(function($) {
    $(".n2-ss-layer video").mouseenter(function() {
        var video = jQuery(this).get(0);
        video.play();
    } ).mouseleave( function(){
        var video = jQuery(this).get(0);
        video.pause();
    } );
});
</script>
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.