Can Webflow buttons or thumbnails be used to change the video in the video player?
TL;DR
- Add an Embed element with an iframe for the video player.
- Create buttons or thumbnails with a
data-videoattribute containing the new video URL. - Add JavaScript to update the iframe’s
srcwhen a button is clicked. - Publish and test to ensure the video updates dynamically.
Yes, you can use Webflow buttons or thumbnails to change the video in a video player by updating an embedded video’s src dynamically using JavaScript and Webflow’s attributes. Here's how to set it up:
1. Add the Video Player
- Add an Embed element inside a div and paste the following iframe for YouTube or Vimeo:
- Example:
<iframe id="videoPlayer" src="https://www.youtube.com/embed/VIDEO_ID?rel=0" frameborder="0" allowfullscreen></iframe> - Replace
VIDEO_IDwith the default video you want to display.
2. Create Buttons or Thumbnails
- Add buttons (or image thumbnails inside links) in Webflow.
- Set a custom attribute for each with the desired video URL:
- Attribute Name:
data-video - Value:
https://www.youtube.com/embed/NEW_VIDEO_ID?rel=0
3. Add Custom JavaScript
Go to Page Settings > Custom Code (Before
</body>section) and add:```javascript
document.querySelectorAll("[data-video]").forEach(button => {
button.addEventListener("click", function () {
document.getElementById("videoPlayer").src = this.getAttribute("data-video");
});
});
```
4. Publish and Test
- Publish the site and click the buttons or thumbnails to confirm that the video updates in the player.
Summary
You can dynamically change a Webflow video player using buttons or thumbnails by setting a data-video attribute and adding a small JavaScript snippet that updates the iframe’s src.