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.
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.
Show me how
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:
- Click the VideoBox in your editor.
- Click Change Video.
- Browse through the Media from Wix library, the Shutterstock library, or click Upload Media to add your own.
- Once you have chosen your video, click Add to Page.
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:
- Click the VideoBox in your editor.
- Click the Behaviors icon .
- 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.
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:
- Click the Big Play Button on your video.
- Click Change Big Play Button.
- Select a new design from the list, or click Customize Design to adjust the color and opacity of your play button.
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:
- Click the VideoBox in your editor.
- Click the Design icon .
- Customize your VideoBox's design: Choose a cover image, select a pattern overlay and adjust the contour and more.
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:
- Click the VideoBox in your editor.
- Click the Mask icon .
- 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.
FAQs
Why is my video not playing on my live site?
I have set my video to autoplay, but there's no sound. Why?
Did this help?
|