Encourage Video Views
You may have noticed the pulsing video play icon animation I have added on our video above. As you can see, it does tend to attract more attention to it than without. I enjoyed coming up with that, and as usual, I am sharing the code for what I created with you. So in this tutorial, I will show you how to make a pulsing Divi Video module play button to get attention and prompt people to watch the video.
▶️ Please watch the video above to get all the exciting details! 👆
1. Select An Icon For The Video Module Overlay
To get started, go to the page or template on your Divi website with Video module. There is an important step that may not seem needed, but trust me, it is required. The default overlay icon does not work for this – instead, we need to manually select one in the icon picker. It can actually be the same icon, but the key is to actually select it rather than leave it as default.
In the Video module settings, go to the Design tab to the Play Icon toggle. In the icon picker, choose any icon you want. For this tutorial, I searched for “play” and selected the same one that is used by default.
2. Add A CSS Class To The Video Module
In order to apply the pulsing video effect to specific Video modules on your site, we will add a custom CSS class and match that with the custom code in the next step. In the Video module settings, go to the Advanced tab to the Custom CSS ID & Classes toggle and add the class “pa-pulsing-video-icon” to the CSS Class input field.
3. Add The CSS Code Snippet To Your Site
Lastly, we just need to add the CSS snippet, which does the work for us! You can copy and paste the code below into your site (see instructions as needed). This code adds a fun animation to the play button on your video. It makes the button look like it’s breathing, getting bigger and smaller. At the same time, it adds a cool shadow effect, making the button stand out more. So when someone visits the website and see the video, it’s intended to catch their eye and make them want to click on it to watch!
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/* Pulsating Video Icon */
.pa-pulsing-video-icon .et_pb_video_play:before {
transform: scale(1); /* Initial size of the icon */
animation: pulse 2s infinite; /* Pulsating animation with a duration of 2 seconds */
border-radius: 50%; /* Rounded shape */
background: black; /* Icon background color */
border: 10px solid black; /* Border style */
}
/* Pulsating animation keyframes */
@keyframes pulse {
0% {
transform: scale(0.95); /* Initial scale */
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); /* Initial shadow */
}
70% {
transform: scale(1.2); /* Scale at 70% of animation */
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0); /* Shadow at 70% of animation */
}
100% {
transform: scale(0.95); /* Return to initial scale */
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); /* Remove shadow at the end */
}
}
Preview And Customize
In case you missed it, you can see the live example at the top of this tutorial. The only difference there is that we modified the colors to match our brand. You can do the same thing as needed, but it can be a little tricky get right. I used the standard black as a default to make it suited for most situations, but with any code shared here on our blog, feel free to play around and experiment to make it your own!
Nelson, love the effect. I followed instructions and pasted the code. The result was the static colors expected, but no pulsing. Is there anything missing in the sample code or some other reason that could block the pulsing?
Hi Foster,
Hmm I am not sure. Is the full code snippet added?
Yes, I pushed the copy button and pasted it into the Theme Options CSS on my site. Here is an example URL. https://diviunleashed.com/divi-videos/divi-plugin/basics-of-custom-post-types-and-divi-machine/ You’ll see the icon has the black outline. But no pulsing.
Hi Foster!
Can you share the URL of the page to check further?