header-logo
Getting started with WixBuild your website and business with Wix. Try using our AI tools to create your website, customize templates, or hire professionals to build or enhance your online presence.
Creating a websiteRead how to use the Wix Editor and manage content on your site. Discover how to protect your visitors' privacy and make your site accessible.
Account & billingReview your account settings, manage your subscriptions and plans and understand your invoices.
Using the Wix mobile appsUse our mobile apps to run your business efficiently on the go and set up a dedicated app for your site members to stay in touch.
Connecting a domainFollow our step-by step guides to learn how to purchase, connect or transfer a domain for your site, and find out how to keep your site’s data secure.
Managing your businessGet tools to grow your business and web presence. Find the right tools for your specific needs, set up online payments and keep track of your site's analytics.
Promoting your siteLearn to make your site more visible promoting it on search engines, sending emails and running paid ads. Improve your online presence with practical tips.
Studio, Partners & EnterpriseGet the most out of your Studio or Enterprise account with advanced features that'll help you work more efficiently.
Need more help?Find solutions for site performance and technical issues, learn about issues we’re working to fix or contact us for help.
placeholder-preview-image
Wix LearnImprove your skills with our courses and tutorials.
Wix BlogGet tips for web design, marketing and more.
SEO Learning HubLearn to increase organic site traffic from search engines.
Website developmentBuild a custom site using our full-stack platform.
Hire a ProfessionalGet matched with a specialist to help you reach your goals.
placeholder-preview-image
In this article
  • Customizing your VideoBox design
  • Designing your play button
  • Applying a video mask

Wix Editor: Customizing the Design of Your VideoBox

In this article
  • Customizing your VideoBox design
  • Designing your play button
  • Applying a video mask
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?
gif of flowing color video with text mask applied over it.

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.
screenshot of design icon clicked and range of different design options being displayed.

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.
Change Big Play Button selected in wix editor, range of different play buttons displayed in panel.

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.
Gif of video mask applied over video of woman running.
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.

Helpmate

Hello

Need a bit more guidance?
Unlock personalized helpLog in to get the most out of Helpmate.