In this guide, we will show you how to add the “Video Play Button widget” to your Elementor website. The Video Play Button widget lets you display an eye-catching play button that triggers a video popup for YouTube, Vimeo, or self-hosted videos with a single click. Perfect for showcasing video content in a stylish and engaging way, this widget enhances user interaction and optimizes performance on your site. With customizable options for button appearance, popup behavior, and styling, the Video Play Button widget helps you seamlessly match your website’s design.
Let’s explore the customization options available in the “Video Play Button widget” for Elementor below.
Add a Free Video Play Button to Elementor
Add a Free Video Play Button Widget to an Elementor Page
Elementor Video Play Button Widget General Settings
Icon
Allows you to choose the play icon displayed on the button, typically a right-pointing triangle.
Add Background
Adds a background shape or element behind the play icon, making the button more prominent.
Video
Specify the source of the video to play. Options include:
YouTube
Vimeo
Self-Hosted (the video file is hosted on your own server)
Video Code
Enter the unique ID or code for the selected video platform to link the button to a specific video.
Autoplay
Enables the video to play automatically on page load or when the button is clicked, usually after opening in a lightbox.
Enable Ripple
Adds a ripple animation effect to the play button, either continuously or on interaction.
Enable Attention Grabber
Activates an additional animation or visual cue to draw attention to the play button.
Custom Close Icon
Let you choose a custom icon for closing the video popup or lightbox.
Elementor Video Play Button Widget Style Settings
Align
Control the horizontal alignment of the play button. Options include:
Center
Right
Left
Background Color
Sets the primary background color of the play button’s shape, such as a circle or square.
Background Color Hover
Defines the background color of the play button on hover, adding interactive visual feedback.
Icon Color
Sets the color of the play icon.
Icon Color Hover
Changes the color of the play icon on hover for an interactive effect.
Circle Size
Controls the overall size of the play button’s background shape, adjustable via slider or numeric input.
Icon Size
Adjusts the size of the play icon independently from the button’s background.
Ripple Color
Specifies the color of the ripple animation when “Enable Ripple” is active in General settings.
Border Radius
Controls the roundness of the button’s corners. Higher values (e.g., 50%) result in a circular button.
Border Type
Select the style of the play button’s border. Options include:
Default
None
Solid
Double
Dotted
Dashed
Groove
Icon Shadow
Adds a static shadow effect to the play icon, with options for color, blur, spread, and position.
Icon Shadow on Hover
Sets a different shadow effect for the icon when hovered, adding interactive depth.
Video Max Width
Defines the maximum width of the video player within a popup or lightbox, preventing it from stretching too wide on larger screens.
Close Icon Size
Controls the size of the close icon for the video lightbox or popup, adjustable via slider or
Close Icon Color
Sets the color of the close icon in its default state.
Close Icon Color Hover
Changes the color of the close icon on hover, providing interactive feedback.
Icon Background Color
Sets the background color behind the close icon (if a background shape is used).
Icon Background Color Hover
Defines the background color behind the close icon on hover.
Border Radius
Controls the roundness of the corners of the close icon’s background shape, from square to fully circular.
Icon Gap Top
Sets the vertical spacing between the close icon and the top edge of its container (typically the video lightbox or popup).
Icon Gap Right
Sets the horizontal spacing between the close icon and the right edge of its container, helping precisely position the icon.
Video Play Button Widget Design Examples For Elementor
Here are some live use cases for the Video Play Button widget.
Video Play Button with Animated Hero Section.
Video Play Button with Animated Section.
Thank you for using the Video Play Button widget for Elementor! This widget lets you trigger YouTube, Vimeo, or self-hosted videos in a stylish pop-up with one click, creating an engaging and seamless viewing experience. With customizable button styles, popup behavior, and video sources, you can easily match it to your website’s design. For help or demos, feel free to contact us or explore examples on our website.
