♿ 🚀 Feature Request: Add pause/play button to "Background Video" for ADA compliance

[prdg1]

Prerequisites

• [X] I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• [X] The feature is still missing in the latest stable version of Elementor ( Elementor Pro )

What problem is your feature request going to solve? Please describe.

This is an ADA compliance issue. In order to be compliant, videos should have a pause/play button. Ideally when loading an mp4 as a background image, we need to be able to display a pause/play button on the video so those with disabilities can choose to stop the video because it "moves and/or blinks".

Describe the solution you'd like

I would like to see an option added to the "section" options when you choose to upload a video. Choice would be to display a pause/start button on the video. Additional option to choose a custom icon or display text. And it would be nice to have an option for where the button is located. It could be as simple as top, bottom, left, right, center, bottom right, bottom left, top right, top left. And even further if you can do a custom X and Y options.

Describe alternatives you've considered

I have added an icon to the banner area of my video and tried giving the video an ID in order to add a script. The ID I create only adds it to the section and not the video.

Additional context

No response

[nicholaszein]

Hello @prdg1,

thanks for submitting your feature request! 🙏

Please understand that while we do welcome new feature requests, we can't promise they will be considered or added to our roadmap for the time being.

🔖 We will, of course, keep this suggestion in mind and consider adding it if there is significant demand in the future.

Please feel free to contact us again with other feature suggestions. 😉

Best regards

[mcrowell]

Good request! I'm working on a solution right now with custom code for a future video. Below is what I have so far, this will only work with an uploaded .mp4 video.

<script>
 jQuery(function($){
      let video = document.querySelector('video.elementor-background-video-hosted');
            document.getElementById('btn').addEventListener('click', button_action);

            function button_action() {
                if (video.paused) {
                    video.play();
                    btn.innerHTML = "Pause Video";
                } else {
                    video.pause();
                    btn.innerHTML = "Play Video"
                }
            };
});
</script>

<button class="button" id="btn">Pause Here</button>

[prdg1]

@mcrowell - Well done! This is perfect and worked like a dream. I'm not good with JS and this was great. Thank you so much! And as a side note, as you noticed, I'd like to see Elementor tackle some of these ADA compliance items as an add in to the builder.

[WVelunza]

@mcrowell Thank you so much this really saved me in a time-crunch project.

[mcartoon]

@mcrowell - Well done! Thank you. I found this solution as the best solution for ADA compliance

[nicholaszein]

Hi there,

📅 This request is scheduled to be Migrated to the new Discussions section.

Please do not duplicate this request.

Once we migrate it, we encourage you to cast your ⬆️ Upvote on the first comment if you feel it should be considered for our roadmap.