To upload and add a video to a page of your site, open your website in the editor and drag the Video component to a page. Once you’ve done that, click on the component to open the options panel to the side of the editor.
Tip: We also have a YouTube component if you want to add videos from YouTube instead.
Video
At the top of the options panel is an area you can click to upload a video. Click on that, then choose a video file on your device to upload. We support most common formats of sizes up to 100MB.
Size & Position
This group of options controls the overall size, position, and display of the video:
- Height - Changing this option will affect the overall size of the video as the video will maintain its proportions at whichever size you choose.
- Aspect Ratio - For most videos, the auto option will use the correct aspect ratio of the video. However, you can change this to a specific ratio if needed.
- Align - For smaller video dimensions, this option will allow you to align the video to the left, right, or center of the component.
Player
This option group controls the functionality of the video.
- Autoplay - Toggle this option on to have your video autoplay on load. Note that with this option on, audio will be automatically muted.
- Loop - Toggle this option on to have your video automatically loop back to the beginning when it reaches the end.
Design
With the options in this group you can control the styling of the component.
- Shape - By default this option uses your default site setting, however you can change this to something else with this option. You can set this separately for different screen sizes by clicking the **desktop/mobile icon**.
- Border - You can add a border to your video with this option, and set the width, color, and style.
Spacing
The Margin option found in this group allows you to control the space around the video within the component. The Padding option controls the space between the border around the video and video itself. Note that increasing the padding will make the video size smaller to accommodate the space.
Hover
To control how the component looks when a visitor hovers over it with a mouse, click on Hover at the top of the options panel. You can change the width, color, and style of the border.