Add the widget to the canvas
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.
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.
- Sets of instructional videos
- Grouping together sets of videos for visitors with different interests
- Groups of travel videos for different destinations
See a video demonstrating the widget in action.
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.
To add a video playlist widget:
- Add the Video Playlist widget to the canvas. For details, see Add elements to a page.
- In the panel, click on the topmost item named Sample video.
Clicking the menu item in the panel opens up several options: Type, Link, 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.
- Copy the link to the video you want to add to the playlist.infoNoteYou 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.
- In the panel, paste the link to the YouTube channel in the Link field.
- 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.
- 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.
- 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.
The new thumbnail appears in the playlist.
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.
Add, delete, and edit playlist items and controls.
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 this playlist item. Using copy helps maintain consistency in your playlist.
– 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.
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.
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.
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:
- – Click for no play icon
- – Click to upload an SVG icon
- – Click to choose a play icon from the icon library
Set the icon used to show that a video has been shown:
- – Click for no played icon
- – Click to upload an SVG icon
- – Click to choose a played icon from the icon library
Determine the look and feel of menu items and controls.
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.
Determines how the Playlist Name is displayed:
- Background: Add a background to the playlist name. For more details, see Create a Background.
- Color: Set a color for the text of the playlist name. For more details, see Choose a color or Use global fonts and colors.
- Typography: Determine the size and type of font used for the playlist name. For more details, see Typography.
Determines the look and feel of the display showing how many videos are in the playlist:
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:
- Background: Set a background color for the list area. For more details, see Create a Background.
- Color: Set a color for the text of the list area. For more details, see Choose a color or Use global fonts and colors.
- Typography: Sent a font type and size for the list area. For more details, see Typography.
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:
- Color: Set a color for the icon’s background. For more details, see Choose a color or Use global fonts and colors.
- Shadow: Click the pencil icon to add a shadow to the icon. For more details, see, What is Shadow?
- Size: Use the slider to determine how big the icon will be. Learn more about units of measurement.
Determine the look and feel of any tabs in the playlist:
- Border Width: Set the thickness of any borders around the tabs. If set to zero, there will be no border.
- Border Color: Set a border color for the tab. For more details, see Choose a color or Use global fonts and colors.
- Background Color: Add a background color to the tab. For more details, see Choose a color or Use global fonts and colors.
Determine the look and feel of the tab title.
- Color: Set the tab title’s default color. For more details, see Choose a color or Use global fonts and colors.
- Active color: Set the tab title’s color after a visitor clicks it. For more details, see Choose a color or Use global fonts and colors.
- Typography: Select a font size and type for the tab title. For more details, see Typography.
Determine the look and feel of the text in 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 default.
Control the placement of your widget, insert links, add custom code and more.