# Vimeo Background Video

{% embed url="<https://vimeo.com/844215259>" %}

## Here is how you can use the Vimeo Component as a background video on your site:

1. Start by adding a Box component (Main Container) to your site and set its position to “Relative.” ![Vimeo background image step 1](/files/Qw0g1VUy0q6GQz4IY2tw)
2. Add a Vimeo component inside the Main Container.\
   ![Vimeo background image step 2](/files/mxVzBTRosciEUD8ztByC)
3. After this, add another Box component (Content) inside the container and set its position to “Absolute.” This will stack the Content Box on top of the Vimeo instance. ![Vimeo background image step 3](/files/UDpZKqpIN3NPeS2i40G7)
4. Now you can add any other content, like headings and paragraphs, to your Content Box, and it will be displayed over the background video.\
   ![Vimeo background image step 4](/files/r2FXovEdJ6qkBDmbeCRE)
5. Make sure to enable the “Background Mode” property for the Vimeo instance to ensure that your video starts automatically and all the video player controls are disabled. ![Vimeo background image step 5](/files/LWjMR2ZelRKf0qT3ZgML)

And done! Now you have a background video on this section of your site.

## Here are some other changes you can make to optimize it further:

1. Enable the “Muted” and “Loop” properties for your Vimeo instance to have the background video play in a loop without any sound.\
   ![Vimeo background image optimization step 1](/files/BHp7kK13MPIUHd3vXDvr)
2. You can also hide or remove the Spinner on your output video for a more polished result. To hide it, select the Spinner instance from your Vimeo instance, head over to the Settings section and toggle off the “Show” option:\
   ![Vimeo background image optimization step 2](/files/4vJt95k7luftn11RdL0O)

## Related

* [Vimeo](/university/core-components/vimeo.md) – Standard Vimeo embeds
* [YouTube](/university/core-components/youtube.md) – YouTube video embeds
* [Image](/university/core-components/image.md) – Static background images


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webstudio.is/university/core-components/vimeo-background-video.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.