To auto start and loop a YouTube video in Webflow without the play button, you'll need to use the YouTube API and some custom code. Here's a step-by-step guide on how to achieve this:
Step 1: Get your YouTube video ID
First, you'll need to obtain the YouTube video ID for the video you want to use. You can find the video ID from the URL of the video. For example, if the video URL is "https://www.youtube.com/watch?v=ABC123", the video ID is "ABC123".
Step 2: Enable the YouTube Data API
To use the YouTube API, you'll need to enable the YouTube Data API for your project. Go to the Google Developers Console, create a new project (if you haven't already), and enable the YouTube Data API for that project.
Step 3: Add the YouTube Player API script
In the Webflow Designer, go to the Project Settings and then the Custom Code tab. In the Footer Code section, add the following script to load the YouTube Player API:
```html
```
Step 4: Add a Div Block for the video
In your Webflow project, add a Div Block element where you want the video to appear. Give it a unique class name (e.g., "youtube-video").
Step 5: Add custom code
In the custom code section of your project, add the following JavaScript code:
```javascript
```
Make sure to replace 'YOUR_VIDEO_ID' with the actual video ID you obtained in Step 1.
Step 6: Publish your site
Save your changes and publish your site for the changes to take effect.
Now, the YouTube video will automatically start and loop without the play button in your Webflow site. The controls and title will be hidden, and you can optionally mute the video by removing/commenting out the `e.target.mute()` line.