Get a professional website for $99 per month. One week turnaround.

Add Pause/Play Button For Background Video

Home Elementor Add Pause/Play Button For Background Video

October 19, 2022

In this Elementor tutorial I will show you how to add a pause/play button for a background video.


  • 0:00 Introduction
  • 2:16 Add JavaScript Code
  • 4:55 Elementor Button Example

Elementor GitHub Feature Request

Native JS Events in Elementor:

JavaScript Code:

					<script src="" type="text/javascript"></script>
      let video = document.querySelector('video.elementor-background-video-hosted');
            document.getElementById('bgvideo').addEventListener('click', button_action);

            function button_action() {
                if (video.paused) {
                    bgvideo.innerHTML = "Pause Video";
                } else {
                    bgvideo.innerHTML = "Play Video"
<button class="button" id="bgvideo">Pause Here</button>


*Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

More Free Resources