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

To change the video in a video player using a button or thumbnail in Webflow, you need to use custom embed code with JavaScript since Webflow doesn’t support dynamic video switching natively.

1. Set Up the Video Player

• Add an Embed element where your video will play.
• Use a standard iframe embed from YouTube or Vimeo, and give it a unique ID — for example, video-player.
• Example YouTube embed code (edit the src as needed):
  <iframe id="video-player" width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?rel=0" frameborder="0" allowfullscreen></iframe>

2. Create Thumbnail Buttons

• Add Buttons or Images to act as thumbnails.
• Give each button a custom attribute (data-video) with the YouTube or Vimeo embed ID you want to load.
• For example:
• Button 1 → data-video="dQw4w9WgXcQ"
• Button 2 → data-video="kxopViU98Xo"
• These will be the embed parts after /embed/ in a YouTube URL.

3. Add Custom JavaScript

• Go to Page Settings > Before tag
• Paste the following script (edit as needed):

<script>  document.querySelectorAll('[data-video]').forEach(function(el) {    el.addEventListener('click', function() {      const videoId = el.getAttribute('data-video');      const player = document.getElementById('video-player');      player.src = 'https://www.youtube.com/embed/' + videoId + '?rel=0';    });  });</script>

4. Test the Interaction

• Publish your site and click on the thumbnails or buttons.
• The main iframe’s video should swap to the corresponding selected video.

Summary

To change videos dynamically in Webflow using thumbnails or buttons, embed an iframe video player, assign data-video attributes to buttons, and use JavaScript to update the iframe’s src when clicked.