top of page
prathamesh sakhadeo logo
Writer's picturePrathamesh Sakhadeo

How do I add the “CLICK TO TURN ON SOUND” graphic seen on ClickFunnels videos?

Updated: Jul 13

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.


click to turn on sound

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

  1. The button disappears

  2. Video restarts

  3. 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.

Comments


old-black-background-grunge-texture-dark-wallpaper-blackboard-chalkboard-room-wall.jpg

Ready to Start?

Watch the free training and download the guide

bottom of page