Help Center
    Help Center
  1. Creating your site
  2. Using the Wix Editor
  3. Adding files and media
  4. Videos
    5. Wix Editor: Using VideoBoxes

Wix Editor: Using VideoBoxes

6 min read
Create a strong impression and pique your visitors' curiosity with visually impactful content. Showcase your own videos, free Wix videos, or professional Shutterstock videos in one of our unique VideoBoxes.
First, choose the VideoBox design that you like, add your video, and then start customizing it. You can design the shape and border of your box, add a cool overlay pattern or dynamic video mask, customize the play button and more.
Gif of 3 videoboxes, each displaying vibrant color and graphics.
In this article, learn more about:

Adding a VideoBox

Start off by choosing a VideoBox design from the Add Elements panel to add to your site. Hover over a VideoBox to see its effects in motion. Once added to your site, you can either keep the existing video or choose a different one from the Media Manager.

To add a VideoBox:

  1. Go to your editor.
  2. Click Add Elements  on the left side of the editor.
  3. Click Video & Music.
  4. Click VideoBox.
  5. Click or drag a VideoBox onto your page.
    Tip: Click More Videos to choose one from the Media Manager, or upload your own.
screenshot of the add elements panel in the wix editor. video and music is selected, with video options being displayed.

Choosing a Video

Once you have added your VideoBox, it's time to choose your video from the Media Manager. We have tons to choose from; you can add a free Wix video, purchase a Shutterstock video, or even upload your own.

To change the video displayed on your Videobox:

  1. Click the VideoBox in your editor.
  2. Click Change Video.
  3. Browse through the Media from Wix library, the Shutterstock library, or click Upload Media to add your own.
  4. Once you have chosen your video, click Add to Page.
screenshot of the free media available from wix within the media manager.

Changing the Behavior of Your VideoBox

Set how your VideoBox behaves by customizing the play, pause and loop settings as well as the sound behaviors. Play around with the options to see which you think will improve engagement and visitor interaction on your site.

To change the behavior of your Videobox:

  1. Click the VideoBox in your editor.
  2. Click the Behaviors icon .
  3. Customize the different play and sound behaviors:
    • Choose whether your video starts on click, on hover or automatically.
    • Decide if visitors should be able to pause the video. 
    • Make your video loop continuously or replay on click. 
    • Make your video play in slow motion or with sound.
      Tip: These options are only available for videos that were recorded in slow motion and/or with sound. Many videos offered by Wix includes slo-mo or sound.
screenshot of the video behaviors panel, displaying options like what happens when the video ends.
Important:
Most internet browsers only allow videos to autoplay when the sound is muted. If your VideoBox is set to play automatically, the video plays without sound.

Customizing Your Play Button

If you set your video to start on click, a Play button is displayed so visitors can play and stop as they please. You can choose the play button you want from the preset designs and change its color and opacity as needed.

To customize the play button of your Videobox:

  1. Click the Big Play Button on your video.
  2. Click Change Big Play Button.
  3. Select a new design from the list, or click Customize Design to adjust the color and opacity of your play button.
screenshot of the big play button selected in the wix editor. change big play button selected, displaying different buttons.

Designing Your VideoBox

This is where you can really make your VideoBox your own. Choose a cover image, border and shadow, and apply a pattern overlay to create a unique effect. There are many patterns to choose from to match your particular style. 
Play around with the design options to see what fits your site's intent best.

To change the design of your Videobox:

  1. Click the VideoBox in your editor.
  2. Click the Design icon .
  3. Customize your VideoBox's design: Choose a cover image, select a pattern overlay and adjust the contour and more. 
gif of videobox design panel opened with mouse hovering over different designs

Shaping Your VideoBox with a Mask

Using VideoBox, your video is no longer confined to the traditional rectangular format. You can apply a video mask to cut out your video into a unique shape and create an impressive visual effect. 
There are thousands of shapes and vector art for you to choose from, and you can also upload your own SVG file with a custom shape.

To apply a mask to your Videobox:

  1. Click the VideoBox in your editor.
  2. Click the Mask icon .
  3. Choose a shape for your VideoBox in one of the following ways:
    • Select a shape from the list. 
    • Click the Add icon  to view more shapes and vector art in the Media Manager. You can also upload your own SVG file from here.
gif of mask icon selected, mask panel open with mouse hovering over different mask effects.

FAQs

Click a question below to learn more.

Did this help?

|
In this article
  • Adding a VideoBox
  • Choosing a Video
  • Changing the Behavior of Your VideoBox
  • Customizing Your Play Button
  • Designing Your VideoBox
  • Shaping Your VideoBox with a Mask
  • FAQs

Related content

Wix Editor: Customizing the Design of Your VideoBox

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched