An Elementor video playlist is a great way to showcase dynamic content to your website visitors. You can use them to present portfolios, tutorials, courses, collections, and much more.
As well as highlighting specific content, and saving space on your website, video playlists can also increase user engagement.
So, if you’re looking for an easy way to display and organise multiple videos on your website, then Elementor’s Video Playlist widget is the perfect option.
The widget allows you to embed and customise any kind of video (you can embed YouTube videos, Vimeo videos, or upload your own videos from file). It’s a widget included in Elementor Pro, so you won’t need any extra video playlist plugins slowing down your website.
It’s easy drag and drop, visual builder is incredibly user-friendly. And the in-built lazy load feature means it won’t impact your website’s performance at all.
How to set up an Elementor video playlist
First of all, in the Elementor builder, search for the video playlist widget in the search bar. Once you’ve located it, simply drag and drop the widget into your widget space (as seen above).
You’ll then see Elementor’s template video playlist, which gives you some example embedded Youtube videos.
Under the Playlist settings, next to Playlist Name, you can, first of all, name your playlist. For this example, we’re going to make a playlist of our YouTube tutorials, so we’ll name it ‘Tutorials’.
Adding your videos
To start adding videos, in the Playlist settings, under Playlist Items, click on the first Sample Video. This will open up that specific video section, where you can choose the first video you want to display. You get three options for displaying your videos: you can embed a YouTube video, embed a Vimeo video, or upload a self-hosted video. For this example, we’ll stick with YouTube.
To link to your YouTube video, simply paste in your YouTube URL under Link.
You can then name your video under Title, and choose whether or not to display the length of your video next to Duration. If you don’t want to display the video’s duration, then simply delete the default 0:16 (as we’ve done).
Or, if you want to display a duration, then enter a value. We recommend setting this value; otherwise, the video’s duration will stay at the default 0:16 (which could confuse your website users!)
Next, choose your thumbnail image by hovering under Thumbnail and clicking Choose Image. You’ll then be taken to the usual WordPress Insert Media tab, where you can upload an image/choose an image from the media library. Again, make sure to do this, or the thumbnail will stay on the default Elementor image.
By switching the Content Tabs on, you can then add an optional video description (or other content) that will show under that specific video.
To edit the tab name of Tab #1, simply go back to the general Content settings and, under Tabs, change the name.
And that’s how easy it is to add a video! You can then follow these same steps to add your other videos, by editing the other Sample Video tabs.
When you’ve edited the other sample video tabs, you should have something like our example above. And if you want to add further videos, simply click on the Add Item button, and follow the same steps as before. (To delete a video, click the X on the specific video tab that you want to delete).
Sections
You can also split your videos up into sections via the Add Item button. As you can see from our example above, we have two videos that are about Elementor, and one video that is about WordPress. So we ideally want to break our playlist up a bit, so that it’s easier for our website visitors to locate specific videos.
To do this, in our new tab, click on Section next to Type. And then add a title for the section under Title. As you can see, this creates a title in our video playlist content bar. To get this in the right position, simply drag and drop the section to where you want it to go (in the settings bar).
As you can see, we’ve dragged and dropped our ‘Elementor’ title section to the top of our Playlist Items (And we’ve also added another section called ‘WordPress Basics’, which we’ve dragged and dropped to above the WordPress video). All of this just helps to organise your video playlist, and to create a more user-friendly design for your website visitors.
Image Overlay
You also have the option to add an image overlay in the Image Overlay tab. This is a great option if you’d rather show an initial featured image to your website users, rather than the thumbnail of the first video.
You can also change the Play Icon by choosing one from the icon library, or uploading your own SVG file.
Additional Options
In the Content settings, there are some Additional Options.
These settings are pretty self-explanatory. You can turn autoplay on or off, add a ‘next up’, add a video count, and more.
This is also where you can turn Lazy Load on or off. If you’re not already familiar with Lazy Loading, then it’s a really cool trick for optimising your website’s loading speed. It works by loading your page asynchronously so that the website isn’t slowed down by trying to load everything at once. This is off by default, so make sure to turn this on!
Style
In the Style settings, under Layout, you can adjust the height of your Elementor video playlist.
In the following sections, you can adjust all of the colours and customisation options for the Top Bar, Videos, Sections, and Tabs.
As we’ve said in previous articles, one of the things that makes Elementor so great is its visual builder. This means that you can play around with all the settings yourself and visually see the changes that take place. As you can see from the example above, we’ve changed the top bar background colour and text colour, the sections colour, and the tabs text colour (to fit in with our brand).
Advanced
In the Advanced settings, there are also further settings that you can add or adjust. These are global settings that will change the whole of your video playlist.
You can add display conditions, motion effects, a border, custom CSS, and more. For video playlists, we don’t think you need display conditions or motion effects, but it’s great to have the option. Have a play around with the settings, and decide for yourself!
And that’s how easy it is to set up a video playlist on Elementor! If you’ve found this article useful, then we also have other how-to articles on various Elementor widgets, like How To Create An Elementor Image Hotspot.
Or, we have 60+ easy to follow WordPress tutorials on the Square Internet YouTube channel you can dive into!
