Tip: For details on how to upload video files and file size limits, see the articles below.
What is a video box?
A video box lets you place a video file directly on your page. Just like image and text boxes, you can freely lay it out and style it on the canvas.
Video boxes are great for adding motion and impact to areas like the hero section (top of the page), service introductions, and galleries.
Note: Supported video files for video boxes
Video boxes only support video files (mp4, webm) up to 1GB uploaded directly to Studio.Design. Videos hosted on external servers can't be used.
For how to upload video files, see Uploading files (images, videos, PDFs) to Studio.Design.
To embed videos from external services like YouTube or Vimeo, use an embed box. For step-by-step instructions, see the articles below.
Adding a video box
Video boxes are added as a <video> tag.
Once added, a video box can't be converted to another type of box, such as an image box.
In the left-side navigation, select the [Add] icon
.In the Add panel, select the [Basic] tab.
From the [Basic] menu, choose the [Video] box and place it on the page.
Tip: Video box with play/pause button (Video with Button)
If you want to give viewers more control over the video, we recommend Video with Button, which includes play and pause buttons.
You can find it in the [Interaction] menu under the [Basic] tab of the Add panel.
Things to know about Video with Button
If you ungroup the part, the link between the video and the play/pause button is lost, and regrouping them won't restore it.
After ungrouping, the play/pause button may appear to be gone, but it's usually just moved to the lower right of the same layer.
Once you delete the play/pause button, it can't be re-created.
The play/pause button has display conditions set on it. Once you delete those conditions, they can't be set again.
Replacing a video
Double-click the video box you want to change.
In the [Upload & Replace] panel on the left, select the new video to replace the existing one.
Setting video display and playback options
In a video box, you can configure how the video is displayed and how it plays.
Select the video box you want to edit.
In the right panel, select the [Video] tab.
If the panel is closed, open the right panel.
Configure the video display settings in the Video tab.
Video settings
At the top of the [Video] tab, you'll see the first frame of the video. Here are the available settings:
URL: Displays the URL of the video.
Poster image: Sets the preview image shown before playback, or the image shown if the video can't load. By default, the first frame of the video is used.
Video fit: Use this to crop or fit the video in the box. The options and how they behave are described below.
cover: Scales the video to fill the box while keeping its aspect ratio. There's no empty space, but if the video and box aspect ratios differ, part of the video will be cropped.
contain: Scales the video to fit within the box while keeping its aspect ratio. The full video is always visible, but if the aspect ratios differ, empty space will appear on the top/bottom or left/right.
fill: Stretches the video to fill the entire box. The aspect ratio is ignored, so the video may be stretched or squished and look distorted.
none: Displays the video at its original size. If it's larger than the box, it'll overflow; if smaller, there will be empty space. No resizing or cropping happens.
scale-down: Uses whichever of
containornonedisplays the video smaller. If the video is larger than the box,containis applied and it's scaled down; if it's smaller,noneis applied and it's shown at its original size.
Show player: Toggles the player controls on or off. (The look and behavior of the player are determined by the browser's built-in features and specs, and can't be customized by Studio.Design.)
Autoplay: When turned on, the video plays automatically.
Muteis automatically turned on as well.Turning on
Inline playbackwill also turn this on.
Mute: When turned on, the video plays muted by default if it has audio.
Turning on
Inline playbackwill also turn this on.Turning on
Autoplaywill also turn this on.
Loop: When turned on, the video plays continuously in a loop.
Inline playback: When turned on, the video plays inline within the page layout on mobile instead of going fullscreen.
Both
AutoplayandMuteare automatically turned on as well.
Disable PiP: When turned on, viewers can't use Picture-in-Picture (PiP) mode.
Play on click: When turned on, the video only plays when the user clicks it.
Area: With Area set, the video also plays or pauses when the user clicks the specified element (area), in addition to the video itself. Set an ID on the element you want to use as a trigger (such as a button or box), and then select that ID in Area.
In the example below, clicking the Play icon <i> with the ID
#play_videoplays or pauses the video.
Setting tags and attributes for a video
Tag and attribute settings are configured in the Settings tab.
Select the video box you want to edit.
In the right panel, select the [Settings] tab.
If the panel is closed, open the right panel.
Tag: Where you set the HTML tag. This is fixed as <video> and can't be changed. (See: HTML tag)
ID: Lets you assign any ID to the video box. (See: Setting an ID)
aria-label, aria-hidden: For details, see What are "aria-label" and "aria-hidden"?
Working with video boxes
Just like image boxes, you can do the following with video boxes.
Right-click a selected video box to open the menu.
Duplicate box
Delete box
Convert to component *Not available for Video with Button
Note:
You can't stack elements directly on top of a video box.
When you want to overlay elements—for example, to use the video as a background—create a parent box and place the overlay elements using absolute positioning.
Editing the look and layout of a video box
Just like other boxes, you can edit the appearance and layout, and set up conditional animations.
For details, see the help articles listed under Box design settings.