HTML5 Videos are a convenient and effective way to display videos on any website. In fact, Divi uses the HTML5 video format to display videos in Divi using the Video Module. However, by default, these videos contain built-in controls (like play, mute, volume, etc.) that have a standard design that is dependant on your browser. But, if you want to enhance the design of these controls, you can actually build and style your own external controls for your HTLM5 video.
In this tutorial, we are going to show you how to create custom HTML5 video controls for a video in Divi. To do this, we will create and style the video and custom control buttons using the Divi Builder. Then we’ll add some custom Javascript to make it all work.
Let’s get started!
Sneak Peek
Here is a quick look at the design we’ll build in this tutorial.
You can also check out this codepen that demonstrates some of the same functionality featured in this tutorial.
Download the Layout for FREE
To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.
Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
To import the section layout to your Divi Library, navigate to the Divi Library.
Click the Import button.
In the portability popup, select the import tab and choose the download file from your computer.
Then click the import button.
Once done, the section layout will be available in the Divi Builder.
Let’s get to the tutorial, shall we?
What You Need to Get Started
To get started, you will need to do the following:
After that, you will have a blank canvas to start designing in Divi.
Part 1: Creating the HTML5 Video in Divi
In this first part of the tutorial, we are going to create an HTML5 Video using the Divi Module. But first, we need to update our section background.
Section Background
Start by updating the section settings for the default section available by default as follows:
The Video Row
Next, we need to add the row that will contain our video. Add a new one-column row to the section.
Then update the row settings as follows:
Creating the Video
Although we can always build our own HTML5 video using HTML, Divi already uses HTML5 video code within the Divi Video Module. So, to create the video, simply add a new video module to the row/column.
Upload Video Files to Video Module
For maximum performance, upload both an MP4 and a WEBM video file of your video to the media gallery.
Next, add the MP4 and the WEBM video files to the video module under the content tab:
Update Video Settings
Under the design tab, update the following:
Under the advanced tab, add the following CSS ID:
Part 2: Creating the Progress Bar
HTML videos include built-in functionality to display a progress bar. We can use a bit of custom code to add our own progress bar for our video.
The Progress Bar Row
To display a custom progress bar for the video, first, create a new one-column row under the row containing the video.
Open the row settings and update the padding as follows:
Adding the Progress Bar HTML
To add our custom snippet of HTML to display the progress bar, we need to add a new code module to the row.
Inside the code box, paste the following HTML:
We will add the functionality we need to the progress bar with our custom Javascript later.
Part 3: Creating the Video Control Buttons in Divi
Now we are ready to start adding some custom video control buttons using a series of Divi button modules.
Creating the Row and Column
First, we need to set up our row and column which will serve as our button bar/container.
The Row
Add a new one-column row under the row containing the progress bar code.
Open the row settings, and update the following:
Adding Flex to the Column
A simple way to get the horizontal alignment for our buttons is to use display:flex on the column containing our buttons. To do this, open the settings for the column and add the following custom CSS to the main element:
Now that our column is ready, we are ready to add our buttons.
The Play / Pause Button
We’ll make this first button the “Play/Pause” button that will toggle the play and pause function for our video. To create the button, add a button module to the column.
Open the button settings and update the button text:
Under the design tab, style the button as follows:
Update the margin for the button as follows:
Under the advanced tab, add the following CSS ID:
The Stop Button
Next up is the Stop button. This button will stop the video and bring it back to the starting point.
To create the button, duplicate the “play/pause” button module.
Then update the button text:
And give the button a custom CSS ID:
The Mute Button
To create the Mute button that will mute the volume of the video, duplicate the “Stop” button we just created.
Update the button text:
Then give it a custom CSS ID:
The Volume Up Button
Our next button will increase the volume of the video incrementally each time you click it. We’ll call it the Volume Up button.
To create the button, duplicate the “Mute” button module.
Then update the button text:
Under the design tab, add an up arrow next to the button text by updating the following:
Then update the padding of the button as follows:
Then update the CSS ID:
The Volume Down Button
We can’t have a “Volume Up” button with also having a “Volume Down” button to incrementally decrease the volume of the video with each click.
To create the “Volume Down” button, duplicate the “Volume Up” button we just created.
Then update the button icon to a “down arrow” icon.
Then update the CSS ID:
The Large View Button
For our last button, we are going to create a “Large View” button that will increase the width of the video container on click.
To create the button, duplicate the “Mute” button. Then drag the duplicate button under the “Volume Down” button so that it sits to the far right of the button bar.
Open the settings for the duplicate button and update the button text:
Then give the button a custom CSS ID:
Part 4: Adding the Custom CSS and JS Code
Now that all of our Divi elements are created, we are ready to bring in the custom code needed to make everything work.
Go ahead and add another code module under the code module containing the progress bar HTML in the second row of our section.
The CSS
In the code box, paste the following CSS making sure to wrap the CSS inside the necessary style tags.
The JavaScript/JQuery
Under the CSS (the ending style tag), paste the following JS code making sure to wrap the code inside the necessary script tags.
Breaking Down the Code
Variables Pointing to HTML elements and Divi Buttons
To start, we need to declare variables that point to each of the Divi elements that have our specified CSS ID. We also need two important variables that point to actual HTML elements (not jQuery objects). These include videoElement (which points to the HTML video element) and progressElement (which points to the HTML progress element).
Once the variables are in place, we hide the default HTML video controls.
Next, we need to make our progress bar grow in width relative to the current time and duration of the video.
Once the video loads the meta data (using the “loadedmetadata” event), on the progress element, we set a max attribute with a value equal to the duration of the video .
Then we use the “timeupdate” event to update the progress bar’s value and width to indicate the current playback position.
We also add a fallback for mobile browsers just in case the progress element’s max attribute isn’t set correctly at this point.
Next, we start creating functions that do things when clicking on our buttons.
For the play/pause button, we toggle the play() and pause() methods using the Media API’s paused and ended attributes with an if statement.
For the stop button, we pause the video and bring the progress value and current time back to 0.
For the mute button, we toggle the muted attribute and also toggle a class that will style the button with a lighter background when muted.
For the Volume buttons, one is defined to increase volume on click ($volinc) and the other is defined to decrease the volume on click ($voldec). This is accomplished using the alterVolumn function which checks the dir parameter for a “+” or “-” and increases or decreases the volume incrementally on each click.
The Large View button toggles a CSS class that adjusts the max width of the video container on click.
And because this example doesn’t contain all of the controls and functionality available within the default video controls, here is a function that shows those controls when hovering over the video.
Final Result
Here is the final result.
And here is how the controls stack on mobile.
You can also check out this codepen that demonstrates the same functionality.
Explore More
If you are familiar with HTML and Javascript and are interested in adding more custom controls and functionality to your HTML5 Videos, you can check this guide on how to create a video player from scratch. You may also want to check out the HTMLMediaElement API to see the possibilities there.
I look forward to sharing more helpful ways to manipulate HTML5 videos and Divi in the near future.
Final Thoughts
Creating some external custom controls for your videos in Divi can open the doors for unique design and functionality. Granted, the example from this tutorial doesn’t explore all the options (or controls) that are available. And, the functionality is limited to one video on a page, not multiple. So it is ideal for customizing one of the main videos you want to feature. But hopefully, it will serve as a solid introduction to what is needed to create some custom HTML5 video controls of your own for your next project.
I look forward to hearing from you in the comments.
Cheers!
This content was originally published here.