Using videos as background or main visual for your header can add movement to a website, making it impactful. This is an example of a website made with STUDIO which uses a video as background. → https://design-ship.jp/
In this article, you will learn about setting a video as background from Youtube and Vimeo.
In the case of Youtube, you can set the background video for free. However, the title of the video and the Youtube logo will show when the video starts loading and when hovering. Additionally, it cannot be made responsive.
In the case of Vimeo, with a premium account you will be able to customize the settings of your video. Even though it is not free, you will be able to hide banners and set a loop among other options, making the video quality higher. Additionally, the videos can be made responsive, so your website will look great also on smartphone and tablet.
Setting a video as background on STUDIO
1. Add an iframe box
From the left panel, drag and drop the Iframe element onto the canvas. Then, click on the blue button iframe on the top left and the Iframe settings pop-up will appear.
＊If you want to place some text on to the video, first create an empty parent box, and then place the iframe inside of it.
2. Embed the code onto the iframe
Copy and paste the code below onto the iframe in STUDIO.
<iframe width="560" height="315" src="https://www.youtube.com/embed/【ID】?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;loop=1&amp;playlist=【ID】&amp;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. Copy the ID of the video you want to use
Copy the ID of the video you want from the URL, as highlighted in red below.
4. Setting the ID
Next, head to STUDIO editor and paste the video ID you just copied in place of the [ID] tags in the embed code, as highlighted in red below.
Placing an element on top of the video
1. Place the box which contains the iframe as a layer right beneath Base (check from the right panel), and set its position as Fixed. (It is also recommended to set height to 100vh to completely cover the height of the screen).
- Add text inside the box, and set their position as Absolute. Create your layout normally.