Embed a Vimeo Video

In Studio.Design, you can use the Embed box to display a video as your main visual or background. Embedding a video is a great way to visually convey your brand's atmosphere and identity.

Tip: You can also upload mp4 or webm videos (up to 1 GB per file) directly to the editor and place them on your page.

For details, see Video box features and how to use them.

When doing so, please be aware of the editor storage limits for each plan.

About using Vimeo videos

With a paid Vimeo account, you can customize options such as hiding menus and banners.

*To embed a Vimeo video as a background without showing controls, you'll need the [?background=1] parameter, which is only available on paid Vimeo plans.

Note: About autoplay with sound and browser restrictions

When autoplaying YouTube or Vimeo videos with sound, browser policies may restrict playback.

For example, Chrome requires specific conditions to be met for autoplay with sound. If those conditions aren't met, the audio won't play even if you add parameters like autoplay=1&muted=0 to your code.

References:

Alternatives
Studio.Design can't override browser restrictions, but here are two options you can consider:

Autoplay with sound muted
Skip autoplay and show the playback bar so visitors can start the video manually

How to embed a Vimeo video

(1) Add a Vimeo embed box in Studio.Design

Click the add icon in the navigation.
Click the [Basic] tab.
In the [Embed] section, click the [Vimeo] embed box.
A Vimeo embed box will be placed on the screen.

(2) Set the link on the box

Select the Vimeo box (Embed box) you placed in step (1).
In the right panel, select the [Embed] tab. If the right panel is closed, open it.
Delete the URL in the [Video URL] field and paste the URL you copied from the Vimeo playback page. (Example: https://vimeo.com/xxxx)
Open the live preview URL and check that everything works as expected.
If you're editing a site that's already published, update the site. Your changes won't appear live until you update. If your changes aren't showing in the editor, try refreshing (reloading) your browser.

Autoplay and loop a video

Here's a common customization example: an embed code that autoplays and loops your video.

In the code below, replace [ID] with the ID of the video you want to embed (the xxxx part of vimeo.com/xxxx in the URL).
<iframe src="https://player.vimeo.com/video/[ID]?autoplay=1&loop=1&background=1"width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow=autoplay></iframe>
In the [Embed code] field, click [Open editor].
On the left side of the [Edit embed code] screen, delete the existing text, paste the code you copied in step 1, and click [Save].
If you're editing a site that's already published, update the site. Your changes won't appear live until you update. If your changes aren't showing in the editor, try refreshing (reloading) your browser.

When the autoplay parameter is present, the Vimeo player starts playing automatically. However, some browsers may block autoplay.

For more details, see Environment-based autoplay restrictions | Vimeo Help Center.

The [?background=1] parameter in the code above is only available on paid Vimeo plans. If you're not on a paid plan, use the code below instead.

Embed a Vimeo Video