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

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

<script src="<https://www.youtube.com/player_api>"></script>

```

​

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

<script>

  function onYouTubePlayerAPIReady() {

    var player;

    player = new YT.Player('youtube-video', {

      videoId: 'YOUR_VIDEO_ID',

      playerVars: {

        autoplay: 1,         // Auto-start the video

        loop: 1,             // Loop the video

        controls: 0,         // Hide the video controls

        showinfo: 0,         // Hide video title and player actions

        modestbranding: 1,   // Remove YouTube logo

        playlist: 'YOUR_VIDEO_ID' // Required for looping

      },

      events: {

        onReady: function(e) {

          e.target.mute();   // Optional: Mute the video

        }

      }

    });

  }

</script>

```

​

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.