Learn how to create a custom video playlist in WordPress with the JetBlog Video Playlist widget. Add videos manually, from YouTube channels or playlists, or via repeater fields.
Before you start, check the tutorial requirements:
- Elementor (Free version)
- JetBlog plugin installed and activated
With the JetBlog plugin, you can create a customizable video playlist in WordPress using the Video Playlist widget. This tool allows you to display videos from YouTube, Vimeo, or custom repeater fields, and gives control over layout, styling, and metadata.
Preparations
First, ensure that the Video Playlist is activated on the WordPress Dashboard > Crocoblock > JetPlugins Settings > JetBlog > Available Widgets tab.
Things to know
The number of activated widgets may impact the website performance, so only the required ones should be enabled.
If you want to get data for YouTube videos, create a Google API key on the Google Developers Console APIs Dashboard and paste the created key in the WordPress Dashboard > Crocoblock > JetPlugins Settings > JetBlog > General Settings > YouTube API Key field.
After that, you can go to the page, post, or template created in the Elementor Editor and search for the Video Playlist widget. Drag-n-drop it to the free section on the site.
Setting the Video Playlist Source
Manual Video List
Select the “Custom Video List” option from the Source dropdown. New items can be added by clicking the “+ Add Item” button.
For every video item, you can set a title, YouTube or Vimeo URL, start time (in seconds), custom thumbnail, and thumbnail size.
YouTube channel or playlist
Select the “YouTube Channel or Playlist” option from the Source dropdown.
Then, enter the channel or playlist URL in the Source URL field and assign the Number of videos.
Videos from the Repeater field
The “Repeater Field” option allows displaying videos from the custom “Repeater” meta field created with the JetEngine or ACF plugin.
The “Repeater” meta field can also be added to posts, taxonomies, and users via the Meta Box feature.
We created a field by pressing the “New Meta Field” button, filled in the Label and Name/ID, and selected the “Repeater” Field type.
By pressing the “New Repeater Field” button, we add two fields with the “Text” Type: one for the video URL and another for the video title (this one is optional).
After that, the settings can be saved.
Then, we added a new post and filled in the repeater item fields with video titles and URLs.
The Video Playlist widget with the “Repeater Field” Source selected should be placed on the Listing template or Single page.
Then, set such fields:
- Repeater Meta Name — enter the “Repeater” meta field name;
- URL Sub-Field Name — enter the sub-field name containing the video URL;
- Title Sub-Field Name — enter the sub-field name containing the video title, or leave empty.
Playlist Settings
Next, navigate to the Settings tab, where you can adjust the appearance of your playlist, including the height, orientation, thumbnail settings, and item numbers. Here, you can also hide the Videos Counter, Item status, Duration, and Thumbnail image settings on tablets or mobile devices.
Style Settings
Next, navigate to the Style widget section to adjust the video playlist view. For example, we alter the Thumbnails Background color in the General Styles tab.
That’s all. Now you know how to create a custom video playlist in WordPress with the JetBlog Video Playlist widget.
