Studio Editor: Adding and Customizing Videos
Videos bring your client's brand story to life, capturing attention and creating a meaningful connection with site visitors. The Studio Editor allows you to seamlessly showcase videos, embed content from social platforms, and enhance your design with unique video elements.
Choose from single video players or customizable VideoBoxes, and refine every detail, from playback settings to creative design touches, to create an engaging visual experience.
Adding a video
Select the video element that best fits your design and goals. Use a single video player for straightforward playback, or opt for a VideoBox for more advanced customization. You can also enhance the site’s design with transparent background videos, crafted by Wix, for a unique decorative touch.
To add a new video:
Click Add Elements
on the left side of the editor.
Click Media.
Select a video type under Video:
Single Video Players: Upload your own video or embed one from a social network.
VideoBox: Showcase your own videos, free Wix videos, or professional Shutterstock videos in beautifully designed video containers.
Transparent Video: Add or upload your own videos with transparent backgrounds.
Drag a video to the desired location on the page.
Customizing a single video player
Fine-tune the single video player to seamlessly fit within your site’s design. Personalize everything from the video’s playback behavior to its controls and layout, ensuring it delivers a polished and engaging experience for every site visitor.
To customize a single video player:
Select the video player.
Choose how to customize it:
Change the video
You can always replace the video to a different one, whether it's from your computer or from external sources (e.g., YouTube, Vimeo, Facebook, etc.)
Click Change Video.
Do one of the following to replace the current video:
Click Change Video to access your files in the Media Manager.
Click any of the social network icons to share a video. Make sure to enter the video's URL under What's the video's web address?.
Decide how your video plays
Click Change Video.
Click the Autoplay toggle to choose how the video starts playing:
Enabled: Your video plays automatically once the site loads.
Disabled: Visitors need to click the Play button to start the video.
Click the Plays in a loop toggle:
Enabled: Your video starts playing again and again when it's finished (in a continuous loop).
Disabled: Your video only plays once.
Note: The option to play videos in a loop isn't available for all external sources (e.g., Facebook, Dailymotion).
Adjust the video player's layout
From the Layout panel, you can choose whether or not to show the video's title and its controls, and adjust the size of the Play button to your liking.
Click the Layout icon
.
Click the Show video title toggle:
Enabled: The video title appears on top of the player.
Tip: You can format and style this title from the Inspector panel.
Disabled: The video title isn't visible.
Drag the slider under Play button size to increase or decrease the size of the button.
Select an option under When playing, controls show:
On hover: The video controls (e.g., the play or pause button) appear when visitors hover over the player.
Never: The video controls aren't displayed.
Note: The available options depend on the type of video you add to the player.
Design the video player
From the Inspector panel, design your video player to match your style. You can change the overlay color and its opacity, add shadow, format the video's title and more.
Click the Open Inspector icon
at the top right of the editor.
Scroll down to Design.
Do any of the following to design the video player:
Fill Color & Opacity: Click the color box to choose a different color for the overlay, and drag the slider to adjust its opacity.
Border: Add a border to make your video player stand out.
Shadow: Click Enable Shadow to add and design a shadow to appear behind the player.
Text: Choose a color for the title and play button, and format the title to your liking.
Customizing a VideoBox
VideoBoxes give you the creative freedom to integrate videos as design elements. Customize playback settings, experiment with unique shapes, and refine every detail—from the cover image to borders—for a truly personalized and visually striking result.
To customize a VideoBox:
Select the VideoBox.
Choose how to customize it:
Set your VideoBox behaviors
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.
Click the Behaviors icon
.
Customize the different play and sound behaviors:
Choose whether your video starts on click, on hover or automatically.
Decide if the video should loop continuously, replay on click or stop once it ends.
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.
Choose the focal point
Choose the focal point of a VideoBox for each breakpoint. This means that when the VideoBox is resized for different screen sizes, the part of the video you want to show is always displayed.
Click the relevant breakpoint at the top of the editor.
Click the Focal Point icon
.
Select the area of the video that you want to remain visible when it's resized.
Design the 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.
Click the Open Inspector icon
at the top right of the editor.
Scroll down to Design.
Do any of the following to design your video:
Cover image: Pick a different image as the cover of the VideoBox (what visitors see before clicking it).
Pattern overlay: Enable the Apply Pattern Overlay toggle to add an interesting pattern (animated or not) that makes the video even more engaging.
Border: Apply a border around the VideoBox while choosing its color, opacity and width.
Shadow: Add shadow while choosing its size, color, angle and distance from the VideoBox.
Contour: Make the edges of the VideoBox more round or rectangular. You can choose the radius (in px) next to each corner.
Note: If you add a video mask, the Border and Contour options are not available.
Add a video mask
Use a video mask to give the VideoBox a unique shape and a striking visual effect. Choose from thousands of shapes and vector art, or upload a shape of your own (SVG file) to cut out the video.
Need to switch the video?
Click Change Video to access the Media Manager and select a different file.
Accessibility tip:
Visitors can pause the VideoBox at any time by hovering over it to reveal the pause button.
Troubleshooting video elements
Even the best designs may encounter small snags. Here are some typical issues you may face with videos and how to resolve them effectively.
Why is my video not playing on my live site?
Motion-based elements, such as transparent videos or animations, may not play on live sites due to the Reduced Motion feature on certain operating systems. This accessibility feature prevents motion effects from running to aid visitors with disabilities.
Check if Reduced Motion is enabled on your device or your visitors’ devices and learn how to disable it:
Note: On mobile devices, Reduced Motion may also activate automatically when in low battery or power-saving mode.
I have set my video to autoplay, but there's no sound. Why?
Most browsers, including Chrome, Firefox, and Safari, block autoplay videos with sound to enhance user experience. To ensure your video plays automatically:
Mute the sound on autoplay settings.
Let users manually enable sound from the video controls.
Browsers that don't support autoplay with sound:
Safari (macOS and iOS): Version 11 and later
Chrome: Version 61 and later (desktop and mobile)
Firefox: Version 66 and later (desktop and mobile)