In this Elementor tutorial I will show you how to add a pause/play button for a background video.
Timestamps:
- 0:00 Introduction
- 2:16 Add JavaScript Code
- 4:55 Elementor Button Example
Elementor GitHub Feature Request
Native JS Events in Elementor:
https://developers.elementor.com/native-js-events-in-elementor/
JavaScript Code:
<script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script>
jQuery(function($){
let video = document.querySelector('video.elementor-background-video-hosted');
document.getElementById('bgvideo').addEventListener('click', button_action);
function button_action() {
if (video.paused) {
video.play();
bgvideo.innerHTML = "Pause Video";
} else {
video.pause();
bgvideo.innerHTML = "Play Video"
}
};
});
</script>
<button class="button" id="bgvideo">Pause Here</button>
