If you’re a WordPress user and use Elementor to build your page, you must be familiar with the Video widgets. With the Video widget, you can embed videos on your page. The Video widget offers plenty of features that can accommodate your needs; you can set the source of video to come from any online video platform (YouTube, Vimeo, Dailymotion) or self-hosted, select the external URL, set the start/end time of your video, set the image overlay, and many more.
Well, talking about the image overlay feature on the Elementor Video widget, when you enable this feature on widget settings, you will find some options here; one of the options is the play icon. By default, the play icon will automatically appear (active) on your video once you enable the Image Overlay option. Unfortunately, there’s not much you can do to customize the play icon, especially the transparency level.
This article will show you how to set the transparency level of the play icon on video overlay in Elementor.
Steps to Set the Transparency Level of the Play Icon on Video Overlay in Elementor
Step 1: Enable Image Overlay
Go to your Elementor editor. We will start everything from scratch, so create a section with a single column. Afterward, please select the Video widget from the widget panel and then drag and drop it into the canvas area.
Once you’ve added the Video widget, continue to enable the Image Overlay option. On the widget settings, go to the Content tab -> Image Overlay, then switch the toggle from HIDE to SHOW. Next, you can edit and style up your widget to your preference, such as adding an image overlay, video link, etc.
Note: By default, the option of the Play Icon is automatically activated once you’ve enabled the Image Overlay. So please ensure that Play Icon is still active. You can use the default play icon or select from the icon library. In this example, we use the play circle from the library.
Step 2: Add the Custom CSS
Once you enable the image overlay option, edit and style up your Video widget; now, we will add a simple custom CSS to your widget. On your widget settings, navigate to the Advanced tab -> Custom CSS.
- Determining the Class Selector of Icon Play Element
Before adding the CSS snippet to the Custom CSS field, you must find out what class selector of the play icon you’re using; each has a different class selector. So. how to find out the class selector of the play icon?
First, you need to switch to the preview mode on your Elementor editor by clicking the Preview Changes button, or you can also click the arrow icon on the edge of the settings panel to hide the panel.
To find out the name of the class selector of the play icon element, you can use the built-in Developer Tools of your web browser (nearly all web browsers have this feature). If you use Google Chrome, you can click the menu icon (three-dot icon) and select More Tools -> Developer Tools.
Once you’ve entered the Developers Tools window, click the arrow icon to inspect an element in your page (see the image below).
Next, point the cursor to the play icon element to determine the class selector.
As in the GIF above, the class selector appears when you hover over the play icon element. As we mentioned, we use play circle as our play icon, and the class selector is .fa-play-circle
- Adding the simple CSS snippet
Once you’ve recognized the class selector of the play icon element you’re using, we will next write the simple CSS snippet on the Custom CSS field.
On your Vdeo widget settings, navigate to the Advanced tab-> Custom CSS.
If you’re using play circle as your play icon (as we are using), you can copy the CSS snippet below and paste it into the Custom CSS field. But, if you’re using a different play icon, you must first replace the class selector.
selector .fa-play-circle{
opacity:0.5;color:blue;font-size:80px;
}
The Code explanation:
The code above selects the class selector of the play icon element using the selector .fa-play-circle . The level of transparency level applies by adding a property and value opacity:0.5.
In this example we also set the color and size of the play icon by adding two properties and values color: blue and font-size: 80px.
That’s it. If you’re happy with the result (as in the image above), you can keep it like this and save or publish your project if you want to. But, if you want to customize the play icon’s appearance, such as the transparency level, color, and size, you can edit the values on the CSS snippet.
The Bottom Line
This article shows how easily you can set the transparency level of the play icon on video overlay in Elementor without the help of any add-ons. Not only the level of transparency but also show you how to customize the color and size of the play icon on video overlay.
