STUDIO News

Setting a video as background on STUDIO

Learn how to use videos as background with this step-by-step guide

STUDIO

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.

Youtube

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.

Vimeo

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.

For Youtube:

<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>

For Vimeo:

<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.

For Youtube:

youtube url

For Vimeo:

vimeo url

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.

For Youtube:

youtube iframe

​​For Vimeo:

vimeo iframe

Done​🎉

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).

  1. Add text inside the box, and set their position as Absolute. Create your layout normally.

placing text on video