Video Box: Features and How to Use It
With Studio.Design, the Video Box lets you place mp4 or webm videos (up to 1GB) directly onto your page. Just like images or text, you can freely arrange videos for eye-catching, dynamic content anywhere on your site.
Available on: All plans
What Is the Video Box?
The Video Box allows you to add video files (up to 1GB, mp4 or webm) directly to your page. You can lay out and style your videos just like images or text boxes—right on your canvas.
Use Video Boxes to add movement and impact to your site’s main visual area, service introductions, galleries, and more.
Note:
The Video Box only supports videos uploaded directly to Studio.Design (mp4 or webm, up to 1GB). Videos hosted on external servers aren’t supported.
For how to upload files, see:
Design To embed videos from YouTube or Vimeo, use the Embed Box:
How to Use Video Boxes
Tip: For details on uploading videos and file size limits, see: File Formats and Size Limits When Uploading
How to Add a Video Box
You can add a Video Box from the Add Panel on the left side of your screen. Video Boxes use the standard <video> tag.
Note: Once you add a Video Box, you can’t convert it into an image or other box type.
Add from the [Box] Tab
Open the left panel by clicking
[>], then choose [Add].In the Add Panel, select [Box].
From the [Basic] , select [Video] and place it on your page.
Add from the [Uploads] Tab
Open the left panel by clicking
[>], then choose [Add].In the Add Panel, select [Uploads].
Drag and drop your video onto the page.
Tip: Video with Button
Want more control? Try the Video with Button option, which includes play and pause buttons. You’ll find it in the [Component Parts] section of the [Box] tab.
A few things to note about Video with Button:
It’s a grouped part, combining a video and play/pause button inside a parent box.
It can’t be turned into a component.
If you ungroup it, the play/pause button may move or disappear, and it won’t work if regrouped.
Once deleted, the play/pause button can’t be recreated.
The button uses Conditional visibility—removing these can’t be undone.
Changing the Video in a Box
To swap out a video
Double-click the Video Box to open the Asset Panel.
Choose the video you want to use from your assets.
Display and Playback Settings
You can adjust how your video looks and plays from the Box Settings Panel on the right.
Open the right panel
[>]and select [Layers].In the Layers Panel, select the Video Box you want to edit.
With the Video Box selected, open the right panel
[<]and choose the [Box] tab.Here you can adjust:
Tag: The HTML tag (always
<video>, can’t be changed).ID: Add a custom ID to your Video Box.
Video: Preview the first frame and see the video’s URL.
Thumbnail: Set a preview image for before the video plays or if it can’t load. By default, this is the first video frame.
Fit: Choose how the video fills the box:
cover: Fills the box, cropping if needed to maintain aspect ratio.
contain: Fits the whole video inside the box, adding space if needed.
fill: Stretches the video to fill the box (may distort).
none: Shows the video at its original size (may overflow the box).
scale-down: Uses the smaller of “contain” or “none”.
Show Player: Show or hide the default video player controls (appearance depends on the browser).
Autoplay: Start the video automatically (mutes the video by default).
Mute: Play the video without sound (required for autoplay and inline playback).
Loop: Play the video on repeat.
Inline playback: On mobile, play the video within the page instead of fullscreen (enables autoplay and mute).
Disable PiP: Prevents Picture-in-Picture mode.
What’s PiP?Picture-in-Picture (PiP) lets users pop the video out into a small window while browsing other content.
Play on Click: Only play the video when users click it.
Box ID: Set a specific area or element (like a button) as the play/pause trigger by assigning an ID.
You can do all the usual things with Video Boxes:
Duplicate
Delete
Create Component (not available for Video with Button)
Note: You can’t layer elements directly on top of a Video Box. If you want to use a video as a background with elements on top, create a parent box and use absolute positioning for the overlay elements.
Styling Your Video Box
Just like other boxes, you can use the Style Bar at the top of the screen to adjust borders, colors, opacity, and even add animations.
For more details, see: Style Bar