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

Changing the video in a video player using a button or thumbnail in Webflow can be done through some custom interactions. Here's how you can achieve this:

​

1. Setup Your Webflow Elements

• Add a Video Component: Place the video component on your Webflow project where you want the video to be displayed.
• Create Buttons or Thumbnails: Add buttons or image thumbnails that will trigger the video change when clicked.

​

2. Prepare Video URLs

• List Video URLs: Organize the URLs of the different videos you want to feature. You can store them in a collection or as custom data attributes on each button/thumbnail.

​

3. Use Custom Attributes

• Add Data Attributes: On each button or thumbnail, add a custom data attribute that contains the video URL. For example, data-video-url="YOURVIDEOURL".

​

4. Implement Custom Code

• Access the Page Settings where you can add custom code, typically in the “Before </body>” section.
• Use a JavaScript snippet to change the video source when a button is clicked. Here's a basic example:

​

  ```javascript

  <script>

  document.querySelectorAll('[data-video-url]').forEach(item => {

      item.addEventListener('click', event => {

          const videoPlayer = document.querySelector('YOURVIDEOSELECTOR');

          const newVideoUrl = event.currentTarget.getAttribute('data-video-url');

          videoPlayer.src = newVideoUrl;

      });

  });

  </script>

  ```

• Replace YOURVIDEOSELECTOR with the selector of your video player.

5. Test Your Interaction

• Preview and Test: Ensure all elements function correctly by previewing your site and testing each button or thumbnail to see if the video changes as expected.

​

Summary

To change the video in a Webflow player using a button or thumbnail, set up video components and buttons/thumbnails, use data attributes to store video URLs, and implement custom JavaScript to swap videos based on user interactions.