V4 Elements Video Mask Estimated reading: 5 minutes 4 views Show a video inside a fun shape, like a circle or a flower. Visitors see a Watch Video button on top of the shape. One click opens the mask, and the full video plays. No code needed. WIDGET Video Mask SHAPES Circle, Flower, Sketch, Triangle, Blob PLAN Free A QUICK LOOK What You Will Build A video that hides behind a round mask. Click Watch Video and the mask opens up. The whole video shows and plays, and the button changes to Close Video. Click the button and the mask opens to the full video BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons first. That is all you need. Note: This widget plays a video file (MP4). It does not take a YouTube or Vimeo link. For those, use the Video widget instead. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: the Video Mask is already on. If you ever need to turn it on again, it only takes a moment. In your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Find Video Mask under Video Widgets and switch it on. Click Save Settings. The Video Mask card in your dashboard (click to zoom) STEP 2 Add It to Your Page Open a page in the Elementor Editor and drop the widget in. Click the + button at the top left to open the Elements panel. Look under AAE General for Video Mask. Drag it onto your page. The Video Mask in the Elements panel (click to zoom) Tip: Can not see it? Type Video Mask in the search box at the top of the panel. Note: A new Video Mask comes with a round shape and a Watch Video button already inside it. STEP 3 Add Your Video Select the widget and open the Video section in the General tab. Click the Video Link (MP4) box. Paste the address of your video file. You can copy it from your Media Library: open the video and copy its File URL. Click Update to save your page. Video Link (1), the playback switches (2) and Mask Shape (3) (click to zoom) Tip: Short videos of around 1920 x 1080 or smaller load fast and look sharp. STEP 4 Choose How It Plays Right below the video link, you find four switches. Autoplay: the video starts by itself. It is on by default. Mute: the video plays without sound. It is on by default. Plays Inline: keeps the video on the page on phones instead of opening it full screen. Loop: plays the video again and again. Tip: Browsers often block autoplay when the sound is on. Keep Mute on so the video can play. STEP 5 Pick a Shape The shape is the window your visitors see the video through. Find Mask Shape in the same Video section. Choose Circle, Flower, Sketch, Triangle or Blob. The shape changes on your page right away. The same video in all five shapes Circle DefaultA clean round window. Flower Four soft petals. Sketch A rough, hand-cut look. Triangle A sharp, bold shape. Blob A smooth, round and wobbly shape. STEP 6 Style the Button The Watch Video button is a normal part of the widget. You can change it like any other element. Open the Structure panel. It is the little layers icon at the top right. Open the Video Mask. You will see the Button inside it, with an SVG icon and a Paragraph. Click the Paragraph to change the words, the size and the color. Click the SVG to change the icon. Click the Button to move it or add a background. The Video Mask (1) and its Button (2) (click to zoom) Tip: The text becomes Close Video by itself after the click. You do not need to set it. RESULT Final Result Click Watch Video on your live page. The mask opens and your video plays. Click Close Video to put the mask back. Click Watch Video, then Close Video SETTINGS Options Video Link (MP4) The address of your video file. Autoplay Default: OnStarts the video by itself. Mute Default: OnPlays without sound. Plays Inline Default: OffKeeps the video on the page on phones. Loop Default: OffPlays the video again and again. Mask Shape Default: CircleCircle, Flower, Sketch, Triangle or Blob. ID Optional CSS ID for the widget. GOOD TO KNOW More Details One click, two states The first click opens the mask. The same button then says Close Video and closes it. Many on one page You can add as many Video Masks as you like. Each can have its own shape and its own video. MP4 only The widget needs a video file. Links from YouTube or Vimeo will not work here. HELP Troubleshooting I do not see the Video Mask in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Video Mask. Click Save Settings, then reload the editor. Look under AAE General, or use the search box. The video does not show Check that the Video Link (MP4) is the direct address of a video file. Open the link in a new browser tab. It should play by itself. The video does not start Browsers often block autoplay with sound. Switch Mute on and test again on your live page. The shape is cut off at the bottom Select the widget, open the Style tab and give it a bigger Height. I want to change the button words Open the Structure panel, click the Paragraph inside the Button and type your own words. You Did It Your page now has a video that opens from a nice shape. If you face any problem, please contact our support team. We are happy to help.
