LogoLogo
Webstudio Home
  • Basics
    • 👋Welcome
    • 🔥Intro
    • 🎓Building your first site
    • 🤓Courses
    • 🔗Roadmap & Links
    • ❓FAQs
  • NEWS
    • 🆕April Update
    • 🆕December Update
    • 🆕September Update
    • 🆕Webstudio CMS Beta and Experts Network
  • university
    • ⚛️Foundations
      • 🛠️Anatomy of the Webstudio Builder
      • 🧱CSS Variables
      • 🖌️Design Tokens
      • 🔡Data Variables
      • ➕Expression Editor
      • Animations
      • 💾CMS
      • ↔️Copy-Paste
        • ↔️CSS
        • ↔️Markdown
        • ↔️Webflow
      • Commands & Search
      • 🎯SEO Settings
      • Shortcuts
      • ⚙️Project Settings
      • Modes
      • Share Links & Transferring Projects
      • 🌐Publishing & Custom Domains
    • 🧩Core Components
      • 📦Box
      • 🔗Link
      • 🖼️Image
      • 📃List
      • ⌨️HTML Embed
      • Animation Group
      • Text Animation
      • Video Animation
      • Stagger Animation
      • ✍️Webhook Form
      • ✍️Form
      • ⏯️Vimeo
      • ▶️Vimeo Background Video
      • YouTube
      • 💬Blockquote
      • 🔲Slot
      • Head Slot
      • ➖Separator
      • 📄Code Text
      • 🔘Button
      • 💾Collection
      • 🪜Content Embed
      • 🪜Markdown Embed
      • Content Block
      • 📘XML Node
    • ▫️Radix UI Components
      • Accordion
      • Collapsible
      • Dialog
      • Navigation Menu
      • Popover
      • Radio Group
      • Select
      • Sheet
      • Switch
      • Tabs
      • Tooltip
    • Marketplace
    • 🤖Webstudio AI
    • 📤Self-Hosting
      • ▶️CLI
      • ▶️Download
      • ▶️Cloudflare Pages
      • ▶️GitHub Pages
      • ▶️Netlify
      • ▶️Vercel
      • ▶️AWS with Flightcontrol (Docker)
      • ▶️Digital Ocean with Coolify (Docker)
      • ▶️Hetzner with Coolify (Docker)
    • 🧑‍🏫How-Tos
      • ▶️How to add icons
      • ▶️How to create fluid video backgrounds with Vimeo
      • ▶️How to create a countdown
      • ▶️How to crop an image with out cropping the original image
      • 🍀How to add a GSAP animation
      • ▶️Build Your Own Directory Website with Airtable
      • ▶️Using filters to dynamically display content (Airtable example)
    • 🔗Integrations
      • How to build a frontend for Hygraph using Webstudio
      • How to build a frontend for Airtable using Webstudio
      • How to build a WordPress frontend using Webstudio (no-code builder)
      • How to integrate a Notion database with Webstudio
      • How to integrate Webhook Form with Pabbly
      • How to integrate Webhook Form with Zappier
      • How to integrate Webhook Form with N8N
      • How to integrate a Webhook Form with Airtable
      • How to integrate Flotiq with Webstudio
    • Craft
  • Contributing
    • 🧑‍🎨Contributing for Designers
    • 🧑‍💻Contributing for Developers
    • Contributing to the Marketplace
  • ⚠️Errors
    • ▶️Connecting your Hostinger Domain to Webstudio
    • 🔌Worker not found
    • 🌮AppSumo redemption failed
  • Misc
    • 📊Account Limits
    • 🆘Webstudio Support Process
    • Fixing overflow issues
Powered by GitBook
On this page
  • Here is how you can use the Vimeo Component as a background video on your site:
  • Here are some other changes you can make to optimize it further:

Was this helpful?

Edit on GitHub
  1. university
  2. Core Components

Vimeo Background Video

Learn how to use the Vimeo Component as a background video on your site.

PreviousVimeoNextYouTube

Last updated 4 months ago

Was this helpful?

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

  2. Add a Vimeo component inside the Main Container.

  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.

  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.

  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.

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:

Enable the “Muted” and “Loop” properties for your Vimeo instance to have the background video play in a loop without any sound.

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:

🧩
▶️