STUDIO allows the use of video for the main visuals and backgrounds. This allows the designer to create a dynamic and impactful site.
Example of a STUDIO site with a background video → https://design-ship.jp/
There are two main ways to set up a background video, using Vimeo and 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.
On Vimeo, you can customize your background video settings if you have a paid account. You can create high-quality background videos with looping and hiding banners, etc. Since it is responsive, it is also displayed beautifully on smartphones and tablets.
【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.
<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>
<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)
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.
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.