How can I auto start and loop a YouTube video in Webflow without the play button?

TL;DR
  • Embed a YouTube video in Webflow by using the URL format https://www.youtube.com/embed/VIDEOID?autoplay=1&loop=1&playlist=VIDEOID&controls=0&showinfo=0, replacing VIDEO_ID with your video ID.
  • Insert this URL into an Embed Element and ensure attributes like allow="autoplay; encrypted-media" are included for the video to auto-start and loop without controls.

To auto start and loop a YouTube video in Webflow without displaying the play button, follow these steps:

​

1. Embed the YouTube Video

  • Copy the URL of your YouTube video.
  • Add an Embed Element to your Webflow project where you want the video to appear.

​

2. Construct the Embed URL

  • Change the standard YouTube URL to an embed format. Use the following format: https://www.youtube.com/embed/VIDEOID?autoplay=1&loop=1&playlist=VIDEOID&controls=0&showinfo=0.
  • Replace VIDEO_ID with your actual YouTube video ID.

​

3. Customize Embed Settings

  • Add Parameters to your embed link:
  • autoplay=1: Starts the video automatically.
  • loop=1: Loops the video.
  • playlist=VIDEO_ID: This is necessary for looping; use the same video ID.
  • controls=0: Hides the play button and controls.
  • showinfo=0: Hides the title bar at the top of the video (deprecated, but still used sometimes).

​

4. Insert the Embed Code

  • Paste the constructed URL in an Embed Element, like this:

  ```html

  <iframe src="https://www.youtube.com/embed/VIDEOID?autoplay=1&loop=1&playlist=VIDEOID&controls=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

  ```

  • Adjust Attributes: Ensure allow="autoplay; encrypted-media" is included in the iframe for autoplay to function correctly.

​

Summary

Auto-start and loop a YouTube video in Webflow by using an embed URL with autoplay, loop, and controls parameters configured. Insert this URL into a Webflow Embed Element, and the video will play and loop without showing the play button.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I recreate the on hover pop up effect like Notion's pricing page in Webflow?
How can I create a multi-level menu in Webflow, like a Products Category with sub-items and additional categories?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I embed an MP4 video into my Webflow project without using external video hosting and loading it from my local device, since I won't have internet access?
How can I create a looped distortion effect on a selected picture in Webflow without any interaction on hover?
How can I fix automatic redirect issues in Webflow when changing page slugs within a folder?
How can I make the block containing text in Webflow grow to the same height as the text, without it pushing up or down the "hide text" button?
What is a CSS trick to scale an <code>&lt;iframe&gt;</code> element to a specific aspect ratio in Webflow?
Is anyone else experiencing a 500 Internal Error code when trying to authorize a site with the Figma to Webflow Plugin? Thank you.
Why are some images missing on a published page in Webflow, when they appear fine in the Webflow designer?
How can I get the checkboxes to update the price and register when added to the cart in Webflow using jQuery or any other method?
Does Webflow have a <code>&lt;hr&gt;</code> feature available?
Can Webflow allow users to add multiple credit cards to their account for easier payment processing and avoid the need to switch between personal and company cards?
Is there a way to handle the 10,000 character limit on custom code elements in Webflow?
Where can you adjust the speed of smooth scrolling in Webflow?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?