Halloween 40% off every Pro plan. Lifetime from $51, pay once.40% off Pro Vanishes in Claim40% off
Get Animation Addons Pro
Classic Elementor widget · Pro

Video Mask for Elementor A video inside a shape that opens to full size on click

The Elementor video mask widget shows your video through a shape, such as a circle, next to a play button. It is an Elementor masked video for hero sections: visitors click, the mask grows until the video fills its frame, and a second click closes it again. Choose the shape and its size, then style the button.

Get Animation Addons Pro See the live demos
  • Video inside a shape
  • Grows to full frame on click
  • Play button with title and icon
  • Autoplay, Mute, Loop and Poster

Classic widget · Elementor 3 and 4 · ProUpdated

Live demos

Video mask designs, live

Three ways to use an Elementor video in a circle or another shape, each on a small site. The demos play a still photo with a slow pan inside the same mask, because they have no video files. Click the play buttons to open and close the mask.

Halden®WorkAgencyContact
Colleagues around a desk, looking at a screen together
Agency intro

Small circle that opens to full screen

The home page of a marketing agency. A giant word sits over a dark section, with a small circle of video and a Watch Video Intro button beside it. Click and the circle grows until the video fills the whole frame and the word goes behind it. Click Close Video to shrink it back.

Click Watch Video Intro, then Close Video

In Video, paste the Video Link and turn on Autoplay, Mute and Loop Button. In the mask settings set Shape to Circle and Size to 160 px, then set the Title in Button to Watch Video Intro.

NorthlightStudioTeamCareers
Meet the studio

The people behind the work

21People, one room, every project shot in house.
A team meeting around a table in a bright office
Team page

Big circle video with a play icon

The team page of a studio. A big circle of video with only a play icon, next to a white circle with the number 21. Click and the circle opens into the full square of the video, slightly over the white circle. Click again to close it.

Click the play icon, then click again

Set Shape to Circle, make the Size fill the box and set Video Height to 420 px. In Button, leave the Title empty and choose the Play Icon.

Maison FormeProjectsStudioJournal
Studio tour

Step inside the showroom

Our showroom is open Tuesday to Saturday. Take the tour first, then book a visit.

The Maison Forme showroom with low sofas and warm timber panels
Showroom tour

Blob video mask with play on click

The studio page of an interior brand. A video in a soft blob shape sits beside a short text about the showroom. The video starts on its poster. The first click opens the mask and starts the video, the second click closes the mask and pauses it.

Click Play tour, then Pause tour

Turn Autoplay off and add a Poster. Pick a different Shape from the circle, and set the Title in Button to Play tour.

Features

Key features of Video Mask

What the widget gives you, each tied to a setting in the Elementor panel.

A video inside a shape

Pick a Shape in the mask settings and the video shows only through it. The circle is the look of both demos on the original page. This is the Elementor video inside shape effect, without any code.

Mask size and offset

Set the mask Size and its Offset to move the shape inside the video frame. A small circle in a corner and a large circle in the middle are the same widget.

Click to open the video

A click on the button grows the mask until the video fills its frame. A second click shrinks it back. That is an Elementor video expand on click effect and an Elementor video reveal on click, and the title changes from Watch to Close while it is open.

A button you design

Set the Title, choose a Play Icon, place it with Icon Position and move the whole button with Offset. Leave the title empty for an icon only button.

Video options

Paste a Video Link and turn Autoplay, Mute, Playsinline and loop on or off for an Elementor autoplay muted loop video. Add a Poster image to show before the video plays.

Play and pause on click

With Autoplay off, the same click also plays the video as the mask opens and pauses it as it closes. The Elementor video mask animation takes 0.3 seconds.

Frame settings

Set the Video Height in pixels, percent or viewport units, and a Border Type for the frame.

Styled to match your site

In the Style tab set the Gap, Alignment, and the Title and Icon colour, typography and size. Hover colours and active colours show the state of the video while it plays. Put it in a full width container for an Elementor video hero section.

Step by step

How to mask a video in Elementor

Five steps. The bold names are the labels in the Elementor panel.

  1. Install Animation Addons Pro, then turn on Video Mask in Animation Addons → Widgets, under Video.

  2. In Elementor, search the panel for Video Mask and drag it into a container.

  3. In the Video panel, paste your Video Link, add a Poster and choose Autoplay, Mute and Playsinline.

  4. In the mask settings, pick the Shape, set its Size and Offset, and set the Video Height.

  5. In the Button panel, set the Title, Play Icon and Icon Position. Style them in the Style tab, then preview and click.

Get Animation Addons Pro Part of Animation Addons Pro · Works with Elementor Free
FAQ

Questions about Video Mask

How do I mask a video in Elementor?

Add the Video Mask widget from Animation Addons Pro, paste a Video Link and choose a Shape in the mask settings. The video then shows through that shape on the page.

Can I put a video in a circle in Elementor?

Yes. That is the usual Elementor video in circle setup: pick the circle as the Shape and set its Size. The circle is the shape used on the original demo page, with a 140 px default mask.

Is the Video Mask widget free?

No. Video Mask is part of Animation Addons Pro. It works with Elementor Free, so you do not need Elementor Pro.

What happens when visitors click the button?

The mask grows until the video fills its frame, and the Watch title changes to a Close title. A second click shrinks the mask back to its first size.

Can I use a YouTube or Vimeo link?

Not as far as we can verify. The widget builds a video element from your Video Link, so use a video file or an MP4 link. For YouTube, see the Youtube Video widget.

Can the video autoplay muted and loop?

Yes. Turn on Autoplay, with Mute and Playsinline for phones, and the video plays behind the mask. With Autoplay off, the button click plays and pauses it.

Can I change the mask shape and size?

Yes. Pick a Shape, then set its Size and Offset in the mask settings. The circle is the shape used on the original demo page.

How do I show only a play icon?

Leave the Title empty. The button then shows only the Play Icon, as in the circle design above. Use Icon Position and Offset to place it.

Does it work in Elementor 4?

Yes. It is a classic widget, so Elementor 4 lists it with the legacy widgets and it keeps working on your pages.

Animation Addons Pro · Elementor 4

Put your video inside a shape

A masked video that opens on click, built and styled in Elementor.

Get Animation Addons Pro Try it free

Halloween deal40% off every Pro planEnds 5 Nov

  • 15-day money-back guarantee
  • Rated 4.6 / 5 on WordPress.org
  • No Elementor Pro needed
  • Elementor 3 & 4 in one license