Studio allows the use of video for the main visuals and backgrounds. This allows the designer to create a dynamic and impactful site.
There are two main ways to set up a background video, using Vimeo and Youtube.
Youtube:
In the case of Youtube, you can set up a background video for free. But the title of the video and the Youtube bar will be displayed at the beginning of the loading and at the hover. Also, it is not possible to make it responsive.
Due to Auto-play Restrictions by YouTube, Auto-play of YouTube videos won't work in all mobile environments.
Vimeo:
If you have a paid account, you can customize the settings of your video and embed it. You can hide menus, banners, etc. You can create higher quality background videos with a paid account.
To embed a Vimeo video as a background with the tools menu hidden, you will need the [?background=1] parameter available in the paid plan.
【How to set up in Studio】
1. Place an iframe box
Within the Studio Editor, drag and drop the iframe box to place it. Click the blue <iframe> in the top left corner of the box to open the iframe settings.
※ If you want to place text or other objects above the video, place an iframe box inside the parent box.
2. Install each iframe embed code
Please copy and paste the iframe embed code below.
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>
Vimeo:
<iframe src="https://player.vimeo.com/video/【ID】?background=1"width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
3. Get the ID of the video you want to place
Copy the video ID in the URL of the video you want to place. (Traced it in red below)
Youtube:
Vimeo:
4. Set the acquired ID
Next, go to the Studio editor screen and paste the iframe ID you have just copied into the "ID" section of the code.
Youtube:
Vimeo:
5. Now you have your background video set up!
【How to place an element on top of a background video】
1. Place the iframe box directly underneath the Base and set the position to fixed (I recommend setting the height to 100vh so that it fills the height when opened)
2. Place boxes and text on top of it and design it.
