Play only current video from video gallery

I want to change the video in a video player through a button or thumbnail it is basic, common on many website how comme it is hard to figure it out how to do it in webflow?

Can you post one of these common examples you mention? Not sure exactly what you’re after. Sounds like you want the series of videos to swap out within a single player but not sure I’ve ever seen this before. Something similar could be achieved with a light box or tab widget but this will load individual players.

I’ll look for an example but I’ve seen it many times. But you understand what I want?

The behavior inside the lightbox

Tried the tabs but it gets a really weird behavior and it is disgusting.

I might try something with the tabs. The problem with the tab it changes the player yeah, but it doesn’t stop the previous one so you keep hearing sound of the previous video.

Everything works with the tabs feature, but can’t figure out how to make only one video play at a time.

I mean if the user click play on the youtube video embedded in the player of the first tab, then lick on the second tab the second video player shows up. And the user can click play on the youtube video.

But the previous video keeps on going. I am not quite good in HTML and don’t wnat to learn too much, I am working as a game designer and level designer learning C#, C++ and Blueprint is enough for my brain hehehe.

It is a one time project for my portfolio.

If anybody can help me out.

https://preview.webflow.com/preview/guillaumes-stunning-site-2ed241?utm_medium=preview_link&utm_source=designer&utm_content=guillaumes-stunning-site-2ed241&preview=2c8a9708004c919d1122757d98aa9122&pageId=64c5bff145a4c36fcf0f59bb&workflow=preview


Im was not able to run autoplay on Codepen as they can have some streaming restrictions but these videos plays automatically on thumbnail click on website (tested in simple code example on my comp).

You might try using the light box component instead of tabs. From what I’ve read, this is the best option for stopping playback on other videos within the carousel.

I do not understand why it should be so complicated and trying hacking things that aren’t made for it when you can build your video player that works with a few lines of code. I have created example to show only that code I have provided on codepen just works in WF.

I have used only one embed for Proof Of Concept and can be set more explicitly with use of WF if you wish. But why spend “hours” in clicking hell and publishing and checking again and again when it is jus a few lines of code that can be used anywhere. But it is only my opinion. :man_shrugging:

here is read-only

and here is live page

I understand your point. But I used Webflow because my knowledge in HTML5 and javascript is pretty limited and because I have designed all the behavior that I wanted on my page except the pause on the video when changed.

If ou look at my example Megaceta I set-up everything with animation and behavior, I am not that good in CSS and everything so to be able to do something through the inspector of WF helped me out.

I don’t intent to be a master in web I did a lot of web project as UX designer or Game Designer but I quit all that to go in the video game industry. I just wanted to make an extra effort for my portfolio because everybody does the same ting in squarespace or wix.

Again Stan you are amazing.

ok @Guillaume_Mercier here are two working examples in WF using WF UI

  1. adding videos manually (no CMS plan)
  2. videos are populated from CMS

here is Read-Only

here is live preview

Hope it will finally solve your issues be able close this request as solved.

It doesn’t work

https://preview.webflow.com/preview/guillaumes-stunning-site-2ed241?utm_medium=preview_link&utm_source=designer&utm_content=guillaumes-stunning-site-2ed241&preview=1ccd9497cc15f34a768e438ca13e2849&pageId=64c5bff145a4c36fcf0f59bb&workflow=preview

live:
https://guillaumes-stunning-site-2ed241.webflow.io/megaceta

I really do not know what else to do for you than exact example to study. :thinking: If you are not able to make it work you are welcome to use @memetican solution. :man_shrugging:

I must have done something. I just changed some png reference and some class name so that they are more recognizable by me.

I think I change all the necessary in the videoJS for the class changes.

Do you see something missing or wrong in the read only?

Your live example works but mine don’t so I am pretty it is a code 18 (18 inch of the screen aka me)

Well I change the name class of the embed player and reload and it works

hi @Guillaume_Mercier if you do not have further questions related to original request feel free to close it as solved