Youtube Like Video Interface

How can I build an interface similar to this? by @joe5

I wanna set up a video course layout that looks like this.
Are there any tutorials on this or what’s the best approach?

Hey there!

The top of our Learn page consists mainly of the Youtube embed, and then a list of videos. That’s pretty much it!

Depending on your familiarity with Bubble, I’d recommend just diving in, creating a new project, and testing the layout that you want.

Are you making use of custom state with RG?

You mean when we highlight the current page’s video? Yes, it’s just a conditional state on the group inside the repeating group list. When current cell’s video = current page’s video, we show a different colors background/shadow/etc

But you can likely come up with another design that fits your brand better

No, I mean the video. I’m not able to figure out how you are displaying the video based on what I choose from the RG. I’m sorry if it’s a lame question. I’m still discovering bubble.

Not a dumb question at all! I went through that myself a lot while learning :slight_smile:

Few things to set this up:

  1. Dynamic page for each video.

  2. The youtube plugin from Bubble. Then use the youtube embed element to make a similar big video box on the left side. The video type you choose is Youtube, then for the Youtube Video ID, you choose the video ID you have saved in your database (assuming you have that setup already).

  3. The right sidebar is a repeating group. When a specific cell is clicked, we just create a workflow to navigate to the same page, but navigate to the current cell’s video. Since it’s a dynamic page and is actually the same page that the user is on, the data for the page loads quicker.

No time to include screenshots step-by-step but that should put you in the right direction

Will try something similar. Thanks :heart:

This topic was automatically closed after 70 days. New replies are no longer allowed.