Video Mask

The Video Mask Widget in Animation Addons for Elementor is a premium feature. To access this widget, make sure the plugin is installed and activated on your site. While both free and pro widgets are available, the Video Mask Widget can only be used with the pro version of the plugin.

Introduction

The Video Mask Widget in Animation Addons for Elementor lets you add custom masks to videos, creating unique and engaging effects that enhance your website’s visual appeal.

Key Use Cases for the Video Mask Widget:

• Add custom masks to videos for unique and eye-catching visual effects.
• Enhance your website’s design and create an interactive user experience with stunning video displays.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Video Mask Widget:

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

How to Add Video Mask Widget in Elementor:

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

How to Configure Video Mask Widget

• In the Elementor panel, search for the “Video Mask Widget.”
• Drag and drop the widget into your desired section on the page.
• In the widget settings, insert your video URL and choose a mask style to overlay on the video (e.g., shapes or SVG masks).
• Customize the mask position, size, and behavior based on your design requirements.
• Use the Style tab to refine the appearance by adjusting colors, borders, padding, and shadows for a visually cohesive look.

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

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

Content Settings

The Video Mask Widget includes two main customization panels within the Content section: Button and Video.

1. Button Panel

This panel allows you to control the button that overlays the video:

• Other Selection Text Tool: Provides optional text input or selection for custom labeling.
• Title: Add a title to the video mask section.
• Course Title: Insert a secondary label or contextual heading (commonly used for courses or categories).
• Play Icon: Select an icon to represent the play button.
• Icon Position: Define the icon’s placement relative to the button text (e.g., left, right).
• Offset: Adjust spacing between elements for better visual alignment.

2. Video Panel

This panel configures the video source, behavior, and styling:

• Video Link: Paste the URL of the video to be displayed.
• Video Options: Toggle playback behaviors:
  
  • Autoplay: Start video automatically.
  • Mute: Mute audio on initial play.
  • Playsinline: Ensures videos play inline on mobile devices.
  • Loop Button: Enable looping for continuous playback.
    
• Poster: Upload a preview image that displays before the video plays.
• Mask:
  
  • Shape: Select a mask shape to overlay the video.
  • Size: Adjust the size of the mask relative to the video frame.
  • Offset: Fine-tune the mask’s position.
    
• Border Type: Choose from solid, dashed, dotted, or none.
• Video Height: Define the video container height in pixels, % or viewport units.

Style Settings

The Style section of the Video Mask Widget provides design controls to fine-tune the visual appearance of the video, button, and related elements. It includes the following customization panels:

1. Gap

• Gap: Adjust the spacing between the button and content elements, allowing for flexible layout control and improved visual balance.

2. Alignment

• Alignment: Set the horizontal alignment (left, center, or right) of the button and text elements within the widget container.

3. Title

• Color: Define the default text color of the title.
• Typography: Customize the font family, size, weight, transform, and line height of the title to maintain consistency with your site’s text styling.

4. Icon

• Color: Set the default color of the play icon.
• Size: Adjust the size of the icon to fit your design requirements.

5. Hover Effects

• Hover Color: Change the title color when hovered over, adding interactivity and emphasis.
• Hover Icon Color: Set the color of the icon when a user hovers over the widget.

6. Active State Styling

• Active Title Color: Customize the title color when the video is actively playing.
• Active Icon Color: Define a distinct color for the play icon in the active state, helping users visually identify the current playback status.

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 Mask Widget in Elementor to create stunning video effects and enhance your website’s visual appeal. For any further assistance or inquiries, feel free to contact our support.