help center

On this page

Video Playlist widget

Last Update: March 7, 2024

Add the widget

The widget Video Playlist widget 1

To access and use a widget:

  1. In Elementor Editor, click +.
    All available widgets are displayed.

  2. Click or drag the widget to the canvas. For more information, see Add elements to a page.

What is the Video Playlist widget?

A video playlist is a collection of videos organized to play one after the other. This provides visitors with a pre-arranged and continuous viewing experience.

See all the options available with the Video Playlist widget.  

Common use case

Taylor is building a website to promote their classes in website building. To give potential students a taste of what the classes are like, Taylor prepares short video summaries of each class.

They then put this these summaries in a video playlist which can be played sequentially. This lets visitors experience what an entire course would be like.  

Example

Additional use cases

  • Sets of instructional videos
  • Grouping together sets of videos for visitors with different interests
  • Groups of travel videos for different destinations

Video

See a video demonstrating the widget in action. 

Adding a Video Playlist widget: Step-by-step

In the example below, we’ll create a menu with four menu items – Home, Store, Blog and Contact Us.

By default, the Layout section of the Content tab, Contains three menu items: Item #1, Item #2 and Item #3.

In this example, we’ll rename these menu items and then add a fourth item. 

Add a video playlist

To add a video playlist widget:
1 drag the widget to the canvas Video Playlist widget 6

  1. Add the Video Playlist widget to the canvas. For details, see Add elements to a page.
    2 Click Sample video Video Playlist widget 8
  2. In the panel, click on the topmost item named Sample video
    Clicking the menu item in the panel opens up several options: TypeLink, Get Video Data, Title, Title HTML Tag, Duration, Thumbnail and Content Tabs.
    Now, let’s add a video to the playlist.

    For this example, we’ll add a video from the Elementor YouTube channel, Getting Started with Elementor Containers.

  3. Copy the link to the video you want to add to the playlist.
    info
    Note
    You don’t have to link to external videos. There is an option to select Self Hosted videos that you can share from your Media Library.

    3 Copy the link Video Playlist widget 10
  4. In the panel, paste the link to the YouTube channel in the Link field.
    3a Click Get Video Data Video Playlist widget 12
  5. In the panel, click Get Video Data. This will automatically grab the information from YouTube, filling in the Title, Duration and Thumbnail. These can all be manually edited.
    4 Rename the video Video Playlist widget 14
  6. In the Title field, change the name of the video to Getting Started. Shorter names are often preferable in playlists.

    A thumbnail is a small image representing the video. The get video function grabbed the default thumbnail, but we can replace it.
    5 Change the thumbnail image 1 Video Playlist widget 16

  7. In the panel, in the Thumbnail section, click the default thumbnail image and add a different image. For more details, see Add images and icons.  
    6 Thumbanil appears in the playlist 1 Video Playlist widget 18

The new thumbnail appears in the playlist.

 

Settings for the Video Playlist widget

You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.

Content tab

Add, delete, and edit playlist items and controls. 

Content tab Playlist Video Playlist widget 20

Give a name to your video playlist.

Give the Playlist name an HTML tag of H1- H6, Div, or Span. Use the dropdown menu to designate the title as a header (H1-6). This helps search engines find and understand the playlist, boosting SEO. The title can also be tagged as a paragraph, span or div.

Edit and create playlist items. Next to the item name are two icons used to add and delete items:

Duplicate copy Video Playlist widget 22 – Duplicate this playlist item. Using copy helps maintain consistency in your playlist.

x delete icon Video Playlist widget 24 – Delete this playlist item.

When you click an item, additional options appear. Open an item to edit the following fields:

  • Type: Use the dropdown to select among the compatible video formats: YouTube, Vimeo, and Self Hosted.  YouTube and Vimeo require links to the videos, Self Hosted videos are uploaded from the Media Library. There is a fourth option, Section. This will place a text section between the playlist items. This is a good way to divide your video playlist into different groups. For example, Videos for  beginners and Videos for advanced users.   
  • Get Video Data: Automatically grabs the title, duration and thumbnail from YouTube or Vimeo.
  • Title: Give this video a name that will be displayed in the playlist.
  • HTML tag: Give the video name an HTML tag of H1- H6, Div, or Span. Use the dropdown menu to designate the title as a header (H1-6). This helps search engines find and understand the video, boosting SEO. The title can also be tagged as a paragraph, span or div.
  • Duration: Limit the length of the video in the playlist. 
  • Thumbnail: Add an image to represent the video in the playlist.
  • Content tabs: Optionally, tabs can appear below the playlist and can be used to describe the contents of the video.  Toggle to Show in order to add these tabs. By default, two tabs will appear but and empty tab is not displayed. Name the tab in the Tab section of the Content tab. 

Click to add a blank playlist item.

Content tab Tabs Video Playlist widget 26

If you chose to add tabs to playlist items, enter a tab name(s).

Toggle to Show if you want to limit the amount of text visible to visitors. This will bring up the following options:

  • Read More Label: Edit the label used when visitors want to expand the tab text. 
  • Read Less Label: Edit the label used when visitors want to contract the tab text. 
  • Height: Set the amount of tab space visible to visitors.
Content tab Image Overlay 1 Video Playlist widget 28

Set an image that will be displayed in the area where videos will be shown. For example, if you want your company logo or a standard image prominently displayed in the video widget. The overlay disappears when the video begins playing. If you choose to Show an Image Overlay, you will have the following options:

  • Choose Image: Select an image to use. For more details, see Adding images and icons.
  • Image Resolution: Choose which image size to use. 
  • Play Icon: Replace the standard play symbol with an icon from the icon library or with an SVG image. 

Set the icon representing the dropdown to the right, left or center.

How the icon will appear by default.

How the icon will appear when a visitor mouses over it.

How the icon will appear when a visitor clicks on it.

Select the icon that will represent the menu. Learn more about icons.

Content tab Additional Settings Video Playlist widget 30

Determine if the videos in the list will play without visitors clicking the play icon. 

  • On Load: Toggle to Show to have the videos in the list play when the playlist appears on the page. 
  • Next Up: Toggle to Show to have the videos play in succession.

Toggle to Yes to display an icon showing visitors they have seen a video. 

Toggle to No to hide the number of videos in the playlist.

Toggle to Hide in order not to display the duration of each video in the playlist.

Toggle to No in order not to display the video thumbnails.

Set the icon used for the Play button:

  • No icon Video Playlist widget 32 – Click for no play icon
  • upload svg Video Playlist widget 34 – Click to upload an SVG icon
  • play icon Video Playlist widget 36 – Click to choose a play icon from the icon library

Set the icon used to show that a video has been shown:

  • No icon Video Playlist widget 32 – Click for no played icon
  • upload svg Video Playlist widget 34 – Click to upload an SVG icon
  • Played icon Video Playlist widget 42 – Click to choose a played icon from the icon library

Style tab

Determine the look and feel of menu items and controls.

Style tab Layout Video Playlist widget 44

Click the icons to determine whether the video will play on the right or left side of the Video Playlist widget.

Use the slider to determine the the height of the video in the play area. 

Style tab Top Bar Video Playlist widget 46

Determines how the Playlist Name is displayed:

Determines the look and feel of the display showing how many videos are in the playlist:

Style tab Videos Video Playlist widget 48

How the list will appear by default.

How the list will appear when visitors mouse over it. 

Determine the look and feel of the list area:

Determine the look and feel of the duration numbers in the list area:

The thumbnails in the list area display either a play or played icon. This section determines the look of those icons:

Style tab Content Video Playlist widget 52

Add a background to any sections in your playlist. Learn more about backgrounds.

Add a border to the sections in your playlist. Learn more about border types.

Round the corners of any borders around the sections in your playlist. For more details, see Border radius tools.

Click the pencil icon Edit Video Playlist widget 54 to add a box shadow to any sections in your playlist. Learn more about shadows.

Add space around any sections in your playlist. Learn how to create space with padding and margins.

Style tab TAbs Video Playlist widget 56

Determine the look and feel of any tabs in the playlist:

Determine the look and feel of the tab title. 

Determine the look and feel of the text in the tab. 

Determine the look and feel of the Show More and Show Less text that expands and contract the tab.  

How the Show More and Show Less text will appear by default. 

How the Show More and Show Less text will appear by when visitors hover over them. 

Hover mode lets you set a transition duration. This is the length of time it takes for the tab to change its appearance.

Advanced tab

Control the placement of your widget, insert links, add custom code and more.

Advanced tab Video Playlist widget 58

Learn more about the Advanced tab settings.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Wait! You get 30-Day Money-back Guarantee

You have nothing to lose – but the discount

days
hours
minutes
seconds