Wix Editor: Customizing the Design of Your VideoBox

Make your VideoBox entirely your own by tweaking its design. Choose a cover image, add a border, apply a graphic pattern overlay, add shadows and more. You can even maximize your VideoBox's impact by adding one of our unique video masks.

Additionally, if you set your video to play on click, then a play button is displayed on the video. You can choose the play button you want from the preset designs and change its color.

Want additional videos on your site?

Open the editor and add a VideoBox

---

Customizing your VideoBox design

Enjoy the creative freedom of customizing design aspects of your VideoBox like choosing a cover image, adding dynamic pattern overlays, framing your VideoBox with borders / shadows and more.

To customize the design of your VideoBox:

1. Click the VideoBox on your site.

2. Click the Design icon

   

   .

3. Customize the design of your VideoBox using the options available.

Tell me more

Choose what you want to customize:

• Cover Image: Choose a cover image for your video. Your site visitors see this image before the video plays and on mobile. Choose from one of the options or upload your own.

• Pattern Overlay: Add a cool pattern overlay to your video. Select a pattern from the designs.

• Contour: Curve the corners of your VideoBox:

  1. Enable the Apply Contour toggle to customize the corners.

  2. Enter a value on the corners.

• Border: Add and customize a border for your VideoBox:

  1. Click the Apply Border toggle to add a border.

  2. Customize your border:

     • Opacity & Color: Click the color box to select the border color and drag the slider to increase or decrease the opacity.

     • Width: Drag the slider to make your border thicker or thinner.

• Shadow: Add and customize a shadow for your VideoBox:

  1. Click the Enable Shadow toggle to add a shadow.

  2. Customize your shadow using the options:

     • Angle: Select the shadow angle.

     • Distance: Drag the slider to increase or decrease the distance of the shadow.

     • Size: Drag the slider to increase or decrease the size of the shadow.

     • Blur: Drag the slider to increase or decrease the shadow blur.

     • Opacity & Color: Click the color box and select the shadow color and drag the slider to increase or decrease the shadow opacity.

---

Designing your play button

When you set your video to play when clicked, a play button is displayed. You can customize this button by choosing from a wide range of preset play button designs and tweaking its color(s) and transparency.

To design your play button:

1. Click the Big Play Button on your VideoBox.

2. Click Change Big Play Button.

3. Select a button design.

4. Click Customize Design.

5. Customize your play button:

   • Click the color box(es) to select the colors of your button.

   • Drag the slider to increase or decrease the play button opacity.

---

Applying a video mask

Present your video as uniquely as possible by playing it in any shape you can imagine. Apply a mask to your VideoBox so that it plays through a striking frame. Choose from a huge range of frame shapes and adjust the look to fit your needs.

To add a video mask:

1. Click the VideoBox in the editor.

2. Click the Mask icon

   

   .

3. Add a mask by doing one of the following:

   • Select a preset: Choose one of the preset shapes.

   • Use a Wix vector art: Click Add + to select from any of the hundreds of shapes in the Wix Vector Art library.

   • Add your own vector art: Click Add + and click Upload Media to upload your own vector art.

4. (Optional) Adjust the look of your VideoBox mask by doing one of the following:

   • Resize the image: Drag the corners or sides of the image to adjust the size.

   • Flip the VideoBox: Right-click the VideoBox to Flip Horizontal or Flip Vertical.

   • Rotate the VideoBox: Click and hold the Rotate

     

     icon on the top left.

Note:

VideoBox videos do not play on your mobile-friendly site. Your cover image as well as any design changes (pattern overlay, contour, border and shadow) you made to your VideoBox are displayed instead of the video.

This article is credited to the Wix team - https://support.wix.com/ and we thank them for that!