This custom video controls WordPress tutorial lets a video match the rest of your design instead of looking like a stock media player. It builds three versions, a simple play button, a toggle that switches between play and pause, and an overlay button that fades away once the video starts.
Add a simple play button
Add a Video element and select your video file. Open the Settings tab and disable the built-in controls, since a custom button will replace them.
Select the button that should trigger playback, open the Interaction tab, and add a new Click interaction targeting the video element.
From the Action tab, add a Player action and set it to Play. One click on the button now starts the video.
Build a play and pause toggle
Add two buttons on top of your video, one for play and one for pause. Give each one a background color, since the icons use currentColor, that same color setting controls the icon too. Round the corners with a border radius.
Set the buttons’ parent container to Relative position. Set each button’s own position to Absolute. This makes the two buttons overlap in the same spot instead of sitting side by side.
Select the parent container and add a new Click interaction targeting the video. Set it to trigger on odd clicks only, the first, third, fifth, and so on, instead of every click.
From the Action tab, add a Player action and set it to Play.
Select the play button and add an Opacity action set to 0%. Shorten the duration so the fade feels quick.
Duplicate the play button’s action, then switch its target to the pause button. Set its opacity to the opposite value, hidden at first, visible once an odd click fires.
Duplicate the odd-click actions, then swap the opacity values, pause back to 0% and play back to 100%. This restores the play button and hides the pause button on the next click.
On the video, replace the Play action with a Pause action. Even clicks now stop the video instead of restarting it from the beginning.
Add a fade-out video overlay
Add a Rows element on top of a second video, then add an Icon inside it. Pick a play icon from the library and switch the icon to an Icon box using the Primary, L variant.
Set the video and button’s shared parent to Relative position. Set the Rows element to Absolute and anchor it to the top left.
Set the Rows element’s width and height to 100%. Its background now covers the whole video instead of just one corner.
Give the Rows element a background color, then lower its alpha for some transparency. Center the icon inside it using the alignment and Content X options.
Add a Click interaction to the Rows element and set the action to Opacity, ending at 0%. The overlay disappears the moment someone clicks it.
Select the video and add a Player action set to Play. The video starts the instant the overlay fades away.
Result
The first video plays with a single click of its button. The second toggles cleanly between play and pause, swapping which button and icon show on each click. The third starts hidden behind a button and overlay that fades out the moment playback begins.