A lot of funnels built using ClickFunnels have an animating button on the video that says “CLICK TO TURN ON SOUND”.
Modern browsers mute the video if the videos are set to autoplay. That’s why you need such kind of a button.
If will go to the Traffic Secrets sales page, which is a book written by Russel Brunson, founder of ClickFunnels, you will this kind of button.
As given in the ClickFunnels documentation there is a paid tool that you can use to add this.
But in this video, we are going to see how you can add the “CLICK TO TURN ON SOUND” button to your videos for free.
If you want to understand how exactly this works then after watching the video you can read the explanation down below.
Right now this code works only if you’re using a video hosted on Vimeo.
How does this work?
There are 3 parts to this script.
CSS Script:
In this part, we are going to add an image of the button on the container of the video.
There is a before pseudo-class in CSS, and we are using this pseudo-class to attach the image of turn on the sound to the video container.
And if you go to the traffic secrets page, again you will find that this particular button is animating, it’s growing and shrinking. So, in order to implement the same thing on our page, I have implemented CSS animations.
You can refer to the code below, to understand how animations and other CSS properties have been implemented.
JavaScript code in the header
Vimeo provides us with a JavaScript file, using which we can control the playback of the video. As you can see from the traffic secrets page, when you click the button, 3 things happen
The button disappears
Video restarts
Volume is turned on to full
The Vimeo script does the bottom 2 things. To make the button invisible, I’m just adding a class to it, which hides the button.
JavaScript code in the footer
This code in the footer handles the click event. It restarts the video with full volume and removes the button.
Easy-peasy code.
If you think this was helpful, do join my Facebook group, where I keep sharing such cool tips and tricks.
If you want to download this code then head over to this page.
