This article shows you how to embed videos uploaded to YouTube and Vimeo.
Things to keep in mind when using embedded videos
(1) Using YouTube videos
There are a few limitations when using YouTube videos. Please review them before getting started.
The title and playback bar appear when the video loads or when you hover over it.
Autoplay on mobile devices is restricted due to YouTube's specifications (works on desktop only).
(2) Using Vimeo videos
To embed a Vimeo video as a background without showing controls, you need the [?background=1] parameter, which is only available on Vimeo's paid plans. A paid Vimeo account also lets you customize other settings, such as hiding the menu and banners.
(3) Autoplay with sound and browser restrictions
When you try to autoplay YouTube or Vimeo videos "with sound," browser policies may block it. For example, Chrome requires specific conditions to be met for autoplay with sound. If those conditions aren't met, adding parameters like autoplay=1&muted=0 to your code won't enable sound.
Workarounds
Browser restrictions can't be bypassed from Studio.Design's side, but here are two options to consider:
Autoplay the video without sound (muted).
Skip autoplay and show the playback bar so visitors can start the video manually.
References:
How to add a background video from an external service
(1) Add an Embed box in Studio.Design
Add an Embed box to your screen.
Click the add icon in the navigation.
Click the [Basic] tab.
From the [Embed] section, click the [Blank] embed box.
The embed box is placed on the screen.
(2) Enter the code in the embed box
Click the embed box.
In the right panel, select the [Embed] tab. If the right panel is closed, open it.
In the [Embed code] input field, click [Open editor].
In the editing area on the left side of the [Edit embed code] screen, delete the existing text, paste the code below, and click [Save]. You'll get the [ID] string in the next step.
For YouTube:<iframe width="560" height="315" src="https://www.youtube.com/embed/[ID]?rel=0&controls=0&showinfo=0&autoplay=1&loop=1&playlist=[ID]&mute=true" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
For Vimeo:
<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>
(3) Get the ID of the video you want to embed
Go to the video you want to embed and grab the ID.
For YouTube:
The ID is the string that comes after https://www.youtube.com/watch?v=.
For Vimeo:
The ID is the string that comes after https://vimeo.com/manage/videos/.
(4) Add the ID to your code
Go back to the Studio.Design editor.
Paste the ID you copied in step (3) into the [ID] placeholder in the code.
If you're editing a published site, update the site. Your changes won't go live until you do.
For YouTube:
For Vimeo:
Adjusting the layout of your embedded video
Here's how to adjust the spacing around your embed box and overlay fixed text on top of the video.
(1) Adjust the spacing
When you place a video embed box, the default settings may leave gaps on the top, bottom, or sides. You can adjust this spacing by changing the width of the Embed box.
Select the Embed box.
In the right panel, select the [Box] tab.
*If the panel is closed, open the right panel.
In the [Layout] menu, configure the following:
・[Width] 200%
・[Height] 110vh
Note:
Even after adjusting the width, gaps may appear on the sides or top and bottom when the screen exceeds a certain width. In that case, increasing the height beyond 110vh can help. Keep in mind that a larger height will also scale up the video.
Background videos are heavily influenced by how YouTube and Vimeo handle playback, so some gaps may be unavoidable on wider screens.
(2) Place a fixed-position element over the background video
You can display text and other elements over the video by grouping the Embed box and placing an absolutely positioned box on top of it.
Select the Embed box on the page.
With the Embed box selected:
・Choose [Group] from the right-click menu
・Or use the shortcut ⌘ + G
Add a text box inside the same group.
Change the text box's positioning to absolute and adjust its position.