When building websites it's important to make sure that meet some of the very basic items relating to accessibility. There are many WordPress plug-ins you can use to do this but there are other things related to Divi that need additional code.
One feature of Divi is the ability to add a background videos. However, from an accessibility perspective, this can a problem. When you add a video background in Divi, there isn’t an option to add any controls to the video, and according to the accessibility requirements, videos that auto play, need the capability to pause the video. That said, Divi does have the option (set to "yes" by default) to pause the video when it's not in view, which is good.
If audio or video last longer than 3 seconds, there needs to be a way to stop or pause it (learn more about this at W3C).
What we'll cover here is a way to add a button to pause/play the background video.
Adding a Pause/Play Button
I'll be using a background video for a section here, but this tutorial should work for any module as Divi allows you to add video backgrounds to pretty much anything. What's important is the ID you give the module with the background video
1. Add a section
Add a section to you page or post, and open up the section settings. Select the "Background" settings and choose the "Background Video" tab.
Click on the MP4 "Add Background Video" button and either upload a new video or choose one from your media library. You should see see the video playing in the settings window as shown below.
Repeat for Webm if you have that version of the video. This can help your video to work on more browsers.
Open the "Spacing" settings in the "Design" tab and add some top/bottom padding (I've added 200px, 100px and 50px for desktop, tablet and mobile, respectively).
Open the "CSS ID & Classes" settings in the "Advanced" tab and add the "CSS ID" "videosection". Save the changes.
2. Add content to the section
Add a row to the section and add your content. For this tutorial I've added a text module and just left the default placeholder text, making some simple changes to the font colour and size.
3. Add the video control button
Add a second row to the section, open the row settings, and select the "Sizing" settings in the "Design" tab. Change both the width and max width settings to be "100%" and save the changes.
Add a button module to the row, open the button settings, and add the button text, e.g. "Pause Video".
Open the "Link"settings in the "Content" tab. Change the link to be "#".
Open the "Position"settings in the "Advanced" tab. Change the vertical offset to be the negative value of the section spacing you added above (I've added -200px, -100px and -50px for desktop, tablet and mobile, respectively).
Change the horizontal offset to to "30px".
Open the "CSS ID & Classes"settings in the "Advanced" tab. Add the "CSS ID" "videocontrol" and the "CSS Class" "disabled".
If you want to add your own styles to the button, open the "Button"settings in the "Design" tab. Select the "Use Custom Styles For Button" toggle and make your style changes. Save the changes.
You should now have something that looks like the following:
4. Add the JavaScript
If you are using a child theme, place this code into a scripts.js file and remove the <script> tags at the beginning and end, ensuring you enqueue the script. If you're not using a child theme, place this in the Divi Theme Options Integrations tab Add code to the < head > of your blog code box.
<script>
jQuery(function($){
// Loop through all links on the page and if they have the "dsabled" CSS class, remove the href attribute.
$("a").each(function () {
if ($(this).hasClass("disabled")) {
$(this).removeAttr("href");
}
});
// Get the background video element
let video = document.querySelector('#videosection video');
// Process the video control button click
document.getElementById('videocontrol').addEventListener('click', button_action);
function button_action() {
// If the video is paused, set it to play and change the button text
if (video.paused) {
video.play();
videocontrol.innerHTML = "Pause Video";
// If the video is playing, set it to pause and change the button text
} else {
video.pause();
videocontrol.innerHTML = "Play Video"
}
};
});
</script>The comments in the JavaScript should be enough to understand what the script is doing but I thought I'd explain why I did the first part where it removes the "href" attribute from the button.
While I was testing the code I realised that as I was using a "#" link for the button, when the button was clicked the browser would jump to the top of the page which, depending on where the video was on the page, could really confuse the user. Pausing/playing the video shouldn't move the page at all.
Removing the "href" attribute meant that the button didn't actually function as a working link - meaning it didn't jump to the top of the page - but could still be used to control the video.
5. Add the CSS
If you are using a child theme, place the CSS into the style.css file. If you're not using a child theme, place the CSS in the Divi Theme Options Custom CSS code box.
As we removed the "href" attribute of the button in the JavaScript, we need to make sure that the cursor behaves the way it normally would, i.e. it shows the pointer cursor, using the following CSS:
#videocontrol {
cursor: pointer;
}And We're Done
Here I've shown you how to add a button allowing the user to pause/play a background video. Below you can have a got at the final background video button solution.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
