In this tutorial, we will learn how to use the Video Widget. The Video Widget allows you to easily embed videos into your website either from a self hosted file or from an external source including YouTube, Vimeo & DailyMotion. This tutorial will cover:
✔ How to insert and customize a video into your content
✔ Working with YouTube, Vimeo, DailyMotion & Self Hosted Videos
✔ Adding an image overlay & play button to your video
✔ Configuring Lightbox to work with your video
✔︎ And much more!
Hey there, it’s Ash from Elementor.
In this tutorial I will teach you how to use the Video Playlist Widget.
Using the Video Playlist allows you to display a collection of video content on your website which will keep users engaged for longer.
Use this fantastic widget to display multiple videos for your courses, collections & more.
So if you’re ready, let’s dive in and get started.
Today we’ll be working on this musician’s website where we have a video playlist showcasing multiple YouTube videos.
Let’s go ahead and remove this widget then we’ll search for…
…and drop in the ‘Video Playlist Widget’.
As you can see the widget has been populated with some sample content to give you an idea of what we can achieve.
First of all let’s give our playlist a name.
Now, click to expand the first sample video.
Under ‘Type’ you can see that we are able to choose from a YouTube or Self Hosted video. There’s also a third option called ‘Section’ which we’ll explore soon.
We’ll leave this on YouTube.
In the link field we’ll paste our YouTube URL of the first video we would like to display. We can also populate this field using dynamic content, and this is true anywhere that you see this icon.
Clicking the ‘Get Video Data’ button will retrieve the title, duration and thumbnail from the source. As you can see these fields have all been automatically updated.
Now that’s pretty awesome!
You can of course amend any of these options if you so wish.
We’ll explore the ‘Contents Tabs’ shortly, but for now let’s jump forward and create the rest of our videos for our playlist.
Great!
Now all of our videos are ready to be properly configured & styled.
The last two videos belong to a different category, so ideally we would like to give them a separate title.
Go ahead and duplicate the third video.
In type select section.
As you can see, the options now update and we are able to enter a title.
We’ll add ‘Classical Covers’ in ours.
Let’s now explore the ‘Contents Tabs’ option.
This is extremely useful if you need to provide more information about your videos.
As you can see, enabling this option opens up two different tabs where you can add text, images and dynamic content.
Let’s add in some content to the first tab and then we’ll explore some additional customisation options.
Now open up the ‘Tabs’ section.
We can first of all give each tab a name like so…
If you’re only using one tab like us, simply leave the second field empty.
We can also state whether or not we would like the tabs area to be collapsible, which is useful if you’ve added a lot of content. You can amend the label text as well as the height.
In the ‘Image Overlay’ area we can toggle on an image which will display on top of the videos. Useful if you would like to display just one image, and could also help with your loading times.
We can also amend the play icon if required by switching it off entirely or by using a custom SVG or an icon from the library.
Under additional options we can amend the layout to display on the right or left.
Enabling autoplay on load will ensure the video starts once the page has loaded, and next up will play the videos in succession.
Next we can toggle on or off a watched icon…
video count…
duration…
& thumbnail.
We can also amend the play & watched icons…
And finally we can enable ‘lazy load’ which can help with page loading times.
Great! Now that we’ve finished setting up our playlist let’s style it to match the design and feel of our website.
Switching over to the style tab we are able to set the height using pixels or via a relative value using viewport height or width.
We’ll set ours to 400px.
We can also amend this value for table and mobile devices as well.
Now open the ‘Top Bar Tab’ section.
Set your colors for the top bar by using global colors or via a manual selection.
And then do the same for your typography.
We switched off the video count option earlier so will leave the video amount values alone, but feel free to customise these if you have this option enabled.
Now let’s style the video section.
Again, all of these aspects can be styled using your global configurations or via manual selection.
Set your colors…
Your typography…
Icon color…
And icon shadow
We can also amend the icon size…
And add a separator if required…
Switch over to the ‘Active’ tab now and set your styles for the tab which is currently displaying the video.
Under ‘Sections’ we’ll leave the background color off…
And then set the font color…
And typography…
We’ll leave the border type as solid, but unlink the values and set 2px on the bottom to create an underline effect.
Finally, let’s style the tabs.
Ensure you have a video selected which uses the tab option so you can preview your changes as you make them.
Border width we’ll set to 2…
And then we’ll set our border and background styles…
Next, we’ll set the colors and typography for the title…
And then the same for the content…
Let’s amend the padding to finish this off…
OK, that looks great!
And if you enabled the ‘show more’ option you can also amend the style at the bottom here.
And there we have it.
We’ve created a fantastic looking video playlist widget for our website to showcase a selection of videos for our users.
Thank you for watching.
Please comment below with any questions, and don’t forget to like and subscribe to our channel for more amazing tutorials.
