How can I change the video in a video player using a button or thumbnail in Webflow?

To change the video source in a video player using a button or thumbnail in Webflow, you need to use custom JavaScript. Here’s how:

1. Set Up Your Video Player

• Add an Embed element where you want the video to appear.

• Inside the Embed element, insert an \`\`\`

2. Add Buttons or Thumbnails

• Create buttons or thumbnails in Webflow and give them a unique data-video attribute containing the new video URL.
• Example:
• Button 1: <div class="video-btn" data-video="https://www.youtube.com/embed/NEW_VIDEO_ID">Change Video</div>

3. Add Custom JavaScript

• Go to Project Settings > Custom Code > Footer Code and insert this script:

  ```html

  ```

Summary

To swap the video in a video player using buttons or thumbnails in Webflow:

1. Set up your <iframe> video player inside an Embed block.
2. Create buttons/thumbnails with a data-video attribute containing the new video URL.
3. Add JavaScript to dynamically change the video source when a button is clicked.