Webflow sync, pageviews & more.
NEW

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

TL;DR
  • Add an <iframe> video player inside an Embed block.
  • Create buttons or thumbnails with a data-video attribute containing the new video URL.
  • Use JavaScript to update the <iframe> src when a button is clicked.

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.
Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can Webflow support a site with multiple user levels and types (such as Performer, Agent, and Venue) that require different access and forms? What would you recommend for user admin functionalities?
What specific features would you want in a user authentication system for Webflow?
How can I create an infinite loop rotation interaction in Webflow for a spinning gear animation?
How can I fix the issue with sections passing under in Safari when using position sticky and position relative in Webflow?
Is there a tutorial available for creating a horizontal scrolling section on Webflow using third party tools or integrations?
In Webflow, I have set the Slider width to be 1/3 of the Mask width, displaying three slides at once. However, when scrolling left, the Slider jumps three slides instead of one. How can I change this behavior to scroll one slide at a time? Additionally, how can I ensure that incomplete slides are shown again after scrolling, instead of being skipped over?
How can I bypass Webflow's limitation for nested collection lists in static single pages and use unlimited nested collections with more than 5 items using a lightweight jQuery with no performance issues?
Does anyone use the code or setting "Strict-Transport-Security: max-age=31536000; includeSubDomains; preload" in Webflow to prevent SSL stripping and improve website security?
How can I access the Webflow Editor to begin entering content in my custom CMS Collections templates? I can't sign in on the login page because it says I am the site administrator, but I don't see a sign-in option on the General tab in Site Settings.
What is the new CMS feature in Webflow that allows users to filter dynamic lists using a defined range instead of just a number of items, and what are some of its benefits and upcoming enhancements?
How can I make all external links open in a new tab by default on my Webflow site, while keeping internal links opening in the current tab? Is there a solution that doesn't involve manually ticking a box for each link? Thank you!
What options should I set in Webflow to make this text wrap to a new line and align the "5 videos ^" to the right?
How can I fix a problem where anchor links with query strings are not working correctly when clicked on within the same page in Webflow?
In Webflow, is there a way to maintain transparency in Lottie files while using the Bodymovin plug-in?
How can I clear the server cache in Webflow after migrating my site?
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 use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?
How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?
How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I make the menu close when a link is clicked in Webflow?
How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?
How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?
How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?
Is there a way to fix the issue of values from Textareas with multiple lines not getting parsed correctly in Webflow Logic when posting to an external API?
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!