Playlist

Nowadays, it's almost unfathomable to think of a web page without a video. If you have a video, why not make more of them and put it into a playlist? Let's add the video playlist, scroll down to the Media section, and grab the playlist by dragging and dropping it in the area where you wanted to go. Let's begin by populating this first with videos, and that's very simple. Here in the sidebar on the right, click on the video, and then you go to the video icon, and you have the option to bring in a video link from YouTube or Vimeo. Let's go for YouTube, and I'll just go here randomly, and I'll click on Share, and I'll copy this Share button over here. I'll paste it, and you will see it will bring in the thumbnail. If it says here on the left, Currently not available or offline, don't worry, it will populate at some point. Let's go to the next one. Let's bring in a second one. And paste the link. From here, you want to bring in a few more videos. And what you do is select a video and click Duplicate. It's going to duplicate that video.

Of course, we're going to switch out the links. I'll go ahead and create a few more and then populate this with links. Now, I've got five videos here, and let's go have a look at how these will look on the front-end. I'll update the page and then click Preview. The playlist element should hold no surprises, and it acts exactly the way you think it should. Here you have the video with all the YouTube controls. And then on the right in the sidebar, you can select the videos and just cycle through the playlist as people would like to watch it. Now, let's see what else we can do here in terms of styling and settings. Back into the builder. Starting with the container element settings, we go to the top right-hand corner and you will see we have here the option to have it horizontal as it currently is or have the playlist at the top in a vertical position. The moment the playlist moves into that, we bring in another setting called Columns. And with this, you can decide how many of the videos will display at the top. At some point, you won't be able to go much higher than six based on space constraints.

And then the slide bar at the bottom that you saw earlier will appear through which people can use to cycle. If you have that many, probably better to stick with horizontal. For this exercise, we'll work with horizontal, but All the styling options apply for the vertical as well. Color here refers to the entire container, so you don't need to play around with it. And if you go to settings, you have width and sidebar. Very important, too. Width will control the entire element, whereas sidebar is going to control the ratio of the Sidebar to the rest of the video. I'll go down to 300. I don't want to make this area too big. Then you have your normal styling, as as well as your effects. After this, to interact with any of the other settings, you just select any of the videos in the playlist, and let's see what we have here. We've worked with the type and the link. And then under advanced, you have everything related to YouTube. You can have the controls. If you want to remove that, you can remove the branding of YouTube, and you can set it on loop. You also have a start and end option that you do set in seconds.

If you want to use a different cover than the one that is drawn from YouTube, you can upload it over here. And then some filters if you need to play around with that. Topography is going to apply to title, as you see here at the top, and then subtitle. So you set these two independently. Let's put it on Monserat, and I'll reduce it to 16. And then for subtitle, I'll also put it on Monserat and put it down to 14. With color, pay attention to all the different sections that you have control over the color, and you also have hover settings here. If we go to title, and I put it on a dark color. Subtitle, I'll put it also on dark. Background, I'll put it on white, and I can even remove it if I have an overlay for the background that I want to use. I'll leave it on white for now. Note that when I go to title, also the active one appears. It will show you the video that is active. In this case, I'm playing this one. The color of the active videos text will display like this. Now, this test title video and subtitle video text that you see here is custom text.

You need to add it there. I'll just call this video one, and then a short description with Morgan. And this is how you will go ahead and change all the text of the other videos as well. A very important feature within this playlist is that you may I want to reorder the videos. I'll go to the bottom one, and let's say I wanted this to be the third video. From the options toolbar, you will see you have these arrows here. Click and it will move. If you want to bring it down again, click down, and I'll put it in the third position, and we can go ahead and call this one video 3. Next to that, settings. And this controls the size of the thumbnail of the playlist video. For the text, you can also line it to the center or to the bottom. And then you have your normal padding and margin options for the text. Finally, you have to go and have a look at how this will display in tablet and mobile devices. For mobile, your play area is actually disabled, but you will still see the playlist. In tablet, still looks good, and you have to consider always here, and that's why you've got the settings for the sidebar, if you have larger text, how to increase that. And then go into mobile. It appears as a playlist.