Menu
If you’ve been building websites for awhile, you’ll understand the importance for making sure that your website has some of the very basic items as it relates to accessibility. There are many plug-ins out that you can use to do this but there are other things within Elementor that will need some additional code.
One great feature in Elementor is the ability to add a background video to your website. However, from an accessibility side of things, this can present some issues. Within Elementor, when you add a video background, there isn’t an option to add any controls to the video. According to the accessibility requirements, videos that auto play, need the option to pause the video.
The general rule is that if audio or video last longer than 3 seconds, there needs to be a way to stop or pause it. You can learn more about this specifically and the rules at W3C. And just a note about the compliance level, this is a level A which is the lowest level of compliance. You should be attempting to meet most if not all A compliance levels.
I had been doing some research on how to accomplish this and quite honestly, I don’t write scripts. Usually I can find a script I can work with and modify as needed. So a fellow Elementor user shared this script with me that works like a charm. SO I TAKE NO CREDIT FOR THIS GENIUS WORK! I however, modified this a bit because I wanted to use the icon or icon box to insert a play button. In my case, I don’t have audio on my background video so I don’t have to worry about the issue with stopping that portion so this works for video only and applies to uploading an mp4.
ADD OPENING SCRIPT TAG HERE
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"
}
};
});
ADD CLOSING SCRIPT TAG HERE
<button class="button" id="btn">Pause Here</button>
That’s it. You now have a pause button for your background video.
Below is the finished product as is with no tweaking or editing. It will pull in your pre-set button styling if you have it set up.
Here are some commonly asked questions about this tip.
The first thing this script does is look for the background video which is indicated by “video.elementor-background-video-hosted”. This WILL not work for videos hosted on YouTube and Vimeo. It needs to be self-hosted on the site. The next part which is the function, says is if the video is playing and you click on the button with the ID of “btn” it will pause the video and display the words “pause video”. Then if it’s NOT playing it will show the words “play video” and allow the video to play. The ID is the main thing here. Making sure that is attached to your button.
NOTE: Ideally, you want your background videos to be less than 13 seconds. Even better if it can be shorter.
Yes. As a matter of face, you can delete line 18 in the example. Just make sure that when you add your button that you give it a CSS ID of “btn” or whatever you change it to. As long as it matches the ID in the code on line 4.
You can but I wouldn’t. Think about when you are out and about using your phone. Connections aren’t great and if you are on a restaurant wifi, it can be a nightmare.
You also want to consider people who don’t have unlimited data plans. So I just turn this option off on mobile devices and just use a static image for it.
Within the background settings, there is an option to keep it turned off on mobile and use a fallback image instead.
The good thing is this is easy to do. In the next section, I walk you through how I used the icon box with a little text to pause my background video. The key is the ID in the code. As long as it is applied, you can use just about anything.
I didn’t really like how this looked or worked because my button styling is a bit chunky. I wanted to use a pause or play button icon instead. You can tweak the code a bit to use the icon or icon box for your player button. It’s pretty easy.
1. Follow steps 1 – 3 above but instead, paste this abbreviated code instead into it.
ADD OPENING SCRIPT TAG HERE
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();
} else {
video.pause();
}
};
});
ADD CLOSING SCRIPT TAG HERE
If you noticed, we removed the part where it is adding the text of pause video and play video. Instead, we are going to use an icon for the player button. We will also include text so someone visually impaired can see that this is a button to pause and play the video.
2. Next thing you want to do is drop the icon widget or the icon box widget into your banner area where your video is. I used the icon box because I wanted to add text.
3. Once you have the icon, I would add text like I have it because you aren’t able to add any kind of special text to the icon so that it can be read by a visual reader. I used the title field of the icon box and deleted the placeholder text in the description.
4. Next, on the advanced tab, put in the CSS ID field “btn”. This will tie the script to that button.
5. Now your icon is the pause and play button.
Here is what my finished banner looks like. You can see the subtle pause/play video on the left hand side of the screen.
You can visit the Red Dirt Relief Fund website and try this out yourself and see how it functions. You can also read about this project and the approach we took when designing and developing it.
CONTACT
(469) 322-8745 or via our contact form
Located in Tampa, FL 33615.
Serving businesses everywhere.
SBA WOSB
Proud to be recognized as a Woman Owned Small Business
