Video Popup

The Video Popup Widget in Animation Addons for Elementor is a paid feature. To use this widget, ensure the plugin is installed and activated on your site. You can explore both free and pro widgets using the filtering options, but this specific widget is available only in the pro version. 

Introduction

The Video Popup Widget in Animation Addons for Elementor lets you display videos in popups, boosting engagement and interactivity on your site.

Key Use Cases for the Video Popup Widget:

• Display videos in a popup format for better user engagement.
• Customize the popup design to match your site’s style and branding.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Video Popup Widget:

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Video Popup Widget in the list.
• Toggle it on to enable the widget.
• Now, the Video Popup Widget is ready to use!

How to Add Video Popup Widget in Elementor:

• Open the page where you want to add the Video Popup Widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Video Popup Widget.”
• Drag the widget to your desired section.
• The Video Popup Widget is now ready for customization.

How to Configure Video Popup Widget

Enable it, create a new page, set a title, choose the Elementor Full Width template, and publish. Adjust options as needed.

You can then customize the thumbnail image, play icon, and popup behavior. Use the styling options in the Elementor panel to adjust appearance, alignment, and animations for an engaging user experience.

• In the Elementor panel, search for the “Video Popup Widget.”
• Drag and drop the widget into your desired section.
• From the widget settings, add your video URL (YouTube, Vimeo, or self-hosted).
• You can then customize the thumbnail image, play icon, and popup behavior. Use the styling options in the Elementor panel to adjust appearance, alignment, and animations for an engaging user experience.

Configuring Video Popup Widget : A Step-by-Step Guide

Once the Video Popup Widget is added to your page, you can configure its settings under different tabs: Content,Style and Advanced.

Content Settings

In the Content section, you’ll find two customization options. Button and video. I only have a button section.

Button

The Button section allows you to customize how the play button appears and behaves:

• Text: Set the label or title that appears on the video popup button.
• Icon: Choose a play icon or any other icon to enhance the button’s visual appeal.
• Icon Spacing: Adjust the space between the text and icon for better layout control.
• Active Ripple: Enable a ripple effect when the button is clicked, adding a dynamic visual cue.

• Ripple Color: Define the color of the ripple animation for brand consistency.
• Active Spinner: Optionally show a loading spinner when the video is being fetched.
• Alignment: Align the button (left, center, or right) to fit your page design.

Video

The Video section allows you to define the source of your video:

• Video Link: Paste the URL of your video from YouTube, Vimeo, or a self-hosted source. This is the video that will open in a popup when the button is clicked.

Style Settings

The Style section provides control over the visual appearance of your Video Popup button:

Button

• Typography: Customize font style, size, weight, line height, and letter spacing for the button text.
• Width & Height: Define the exact size of the button for consistent layout and design.
• Border Type: Choose from solid, dashed, dotted, or none to frame the button as needed.

• Border Radius: Round the button’s corners to match your design aesthetic.
• Box Shadow: Add shadows for depth and emphasis, making the button stand out.
• Text Color: Set the color of the button text for better visibility or brand alignment.
• Background Type: Choose between solid colors, gradients, or images as the button background.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Video Popup Widget in Elementor to display engaging videos in a popup format. It’s a great way to boost user interaction on your site.

For any questions or further assistance, feel free to reach out to our support team.