Can Webflow buttons or thumbnails be used to change the video in the video player?

TL;DR

Embed a YouTube or Vimeo iframe using a custom HTML Embed element on your Webflow page.
Add buttons or thumbnails with custom data-video-id or data-video-url attributes.
Use custom JavaScript to listen for clicks and update the iframe's src dynamically.
Optionally use YouTube or Vimeo APIs for advanced video control without iframe reload.

Webflow does not support native video swapping with buttons or thumbnails out of the box, but it can be achieved using custom embed elements and minimal custom code.

1. Use Custom HTML Embed for Video

Add an Embed element anywhere on your Webflow page where you want the video to appear.
Embed a YouTube or Vimeo iframe, using a placeholder video.
Example: <iframe id="main-video" src="https://www.youtube.com/embed/VIDEO_ID?rel=0" loading="lazy" allowfullscreen></iframe>

2. Create Buttons or Thumbnails

Add Buttons, Links, or Images to act as video selectors.
For each button/thumbnail, use a custom attribute like data-video-id (for YouTube) or data-video-url.
Example: A thumbnail set with data-video-id="dQw4w9WgXcQ".

3. Add Custom Code to Swap Video

In your Page Settings or using an Embed component at the bottom of the page body, add a small <script> that listens for click events and changes the src of the iframe.
Example logic (summary only; not the actual code block):
Use document.querySelectorAll to find all video buttons/thumbnails.
On click, extract the data-video-id or URL.
Update the src of the #main-video iframe using JavaScript.

4. Consider Vimeo or YouTube APIs for Advanced Control

For seamless transitions without reloading the iframe, you can use the YouTube Player API or Vimeo Player API.
This requires more advanced scripting but allows full control (e.g., play, pause, swap video dynamically).

Summary

Webflow doesn't natively support switching videos via buttons, but you can embed a video iframe and use buttons or thumbnails with data- attributes and custom JavaScript to swap the video URL dynamically.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

How can I create a "FAQ like" page in Webflow with multiple accordion menus that close when another is clicked? I understand that I need to set the interactions for siblings, child, parents of the class, but I'm unsure which family member is responsible. Thank you for any tips!

How can I make the sign-up form modal in Webflow's homepage only appear once, either after initial load or after the user has signed up or closed out, and how and where can I insert the code to set a cookie?

How can I give buttons a data-attribute in Webflow and then set the input value through JavaScript when one of the buttons is clicked, so that the value is already in the contact form?

What other e-commerce solutions can be used with Webflow for creating and managing products on a website?

How can I auto-populate a form field in Webflow with the CMS item name from the same page?

How can I turn the sound off/on on the background video in Webflow, either natively or through a workaround? It's for a movie site and having audio in the background would be helpful. Should I separate the audio and video and control the audio with a separate HTML 5 to avoid sync issues? Thank you.

How can I ensure consistent form functionality on Webflow?

How can I send a Webflow form submission directly to the CMS without relying on third-party tools or integrations?

Can webpages be transferred from Wix to Webflow during website migration?

What are the Nameservers for pointing a domain to Webflow?

Is there a way to reverse the order of grid items for tablet and mobile devices in Webflow?

How can I prevent duplicate items in a Webflow Collection List, even if they have the same name?

How can I optimize the speed of my Webflow site that includes Vimeo videos?

Can I use the Lottie integration with the Webflow CMS to dynamically fill a Lottie element on each individual CMS entry using a uploaded JSON file?

How can I add custom CSS media queries to the Header in the custom code section in Webflow?

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

How can I dynamically redirect to a CMS created after form submission in Webflow?

In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!

How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?

Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?

How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?

How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?

How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?

How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?

How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?

How can I change the language of the Google Maps embed from English to Arabic in Webflow?

How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?

How can the text color be changed for custom input fields on Webflow?

How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?

How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?