Editor X: Adding and Customizing Videos on Your Site
Videos are a great way to engage your visitors and tell your brand's story. Editor X makes it easy to showcase your content, embed from social media and add stunning video-based design elements.In this article, learn how to:
Add a video Customize a Single Video Player Customize a VideoBox Stretching a video to fill a section, container or grid cell FAQAdding a videoThere's several types of videos you can add to your site:
Single videos: 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. To add a new video:
Click Add  on the top of Editor X. Click Media. Select a video type under Video (e.g., Single videos, VideoBox, etc.) Drag a video to the desired location on your site. (Optional) Click Change Video to upload your own, add a free Wix video or purchase a professional video.Customizing a Single Video PlayerCustomize the Single Video Player's layout, design and behavior to your specific needs. You can choose whether your video starts playing automatically and / or in a loop, decide which controls to show and design them as well. Click below to learn how to customize your Single Video Player:Change the videoYou 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.)To change the video:
Click the Video Player in your Editor. Click Change Video. (In the Video Settings panel) 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 playsFrom the Video Player settings panel, you can choose how the video plays and behaves. To decide how the video plays:
Click the Video Player in your Editor. Click Change Video. (In the Video Settings panel) 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 layoutFrom 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. To adjust the player's layout:
Click the Video Player in your Editor. 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 options available depend on the type of video you add to the player.Design the video playerFrom 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. To design the player:
Click the Video Player. Click the Inspector icon at the top of Editor X. Select the design tab.  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 VideoBoxWhen using VideoBoxes to display media, you get a lot of creative liberty to make them part of the design. Set the video to play exactly how it should, choose its focal point and design every detail - from the cover image to the Play button.Click below to learn how to customize your VideoBox:Set your VideoBox behaviorsSet 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 set your VideoBox behaviors:
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.  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.To set the video's focal point:
Select the breakpoint you want to customize the VideoBox for (e.g., mobile, tablet, desktop). Click the VideoBox in your Editor. Click the Focal Point icon . Select the area of the video that you want to remain visible when it's resized.Design the VideoBoxThis 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. To design your VideoBox:
Click the VideoBox. ﻿Click the Inspector icon ﻿ at the top of Editor X. Click the Design tab .  Do any of the following to design your video:
    
Cover image: Pick a different image as the cover of your video (what visitors see before clicking it). Pattern overlay: Click the Apply Pattern Overlay toggle to add an interesting pattern (animated or not) that makes your video even more engaging.  Border: Apply a border around your video while choosing its color, opacity and width.  Shadow: Add shadow while choosing its size, color, angle and distance from the video.  Contour: Make the edges of your VideoBox more round or rectangular. You can choose the radius (in px) next to each corner.   Add a video maskUse a video mask to give your 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 your video.Change the Play buttonIf you set your video to play on click on the VideoBox and transparent videos, then a play button is displayed on the video. You can choose the play button you want from the preset designs and change the color.You can also control the properties of the play button in the Inspector and set the layout per breakpoint.Stretching a videoAdd any video and stretch it to fill a page section, container or grid cell. To stretch a video:
Click the video on your page. Click the Stretch icon  on the top right of the video to fill the whole space.FAQHaving issues with your video? Click a question below to learn more:Why is my video not playing on my live site?You or your visitors may notice that elements that contain motion (such as animation effects and transparent videos) do not play on your Wix live site - on both mobile and desktop. This is because some operating systems contain a Reduced Motion feature, which disables animations and videos from playing in the browser. Reduced Motion is an accessibility feature, which means its primary use is to allow visitors with disabilities or impairments to visit your site.
Click the relevant device from the list below to learn how to disable Reduced Motion.
iPhone and iPad Mac OS Windows OS AndroidNote: Reduced Motion is also automatically enabled for some mobile devices in low battery / power saving mode.I have set my video to autoplay, but there's no sound. Why?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.

The following browsers no longer support autoplay:
Safari 11 and later versions (on MacOS and iOS) Chrome 61 and later versions (desktop and mobile) Firefox 66 and later versions (desktop and mobile)