Using a video playlist allows you to display a collection of videos. You can use this type of content for websites of many fields such as education for courses, exercise for daily movements, music for songs in a category, etc.

The video playlist will keep your visitors engaged for longer, and they will find videos in the same playlist easily. Let’s figure out the way to display a video playlist with the help of MB Views from Meta Box.

This is a video playlist I created as an example:

An example of the video playlist with the corresponding video appears when clicking on the title.

Video Version

Before Getting Started

In the playlist, there will be multiple videos. When you click on one from the left panel, its video player will appear immediately on the side.

The playlist is created manually which allows you to flexibly add or remove any video. The video information includes the ID on Youtube and the title will be saved in custom fields with Meta Box. Then display them using MB Views.

The playlist includes several videos with their information as title and ID are saved in custom fields

So, these are some tools are needed for this practice:

  • Meta Box plugin: to have a framework to create custom fields for storing some of the video information. You can download it directly on wordpress.org;
  • MB Views: to get data from custom fields and display them on the section of the playlist;
  • Meta Box Builder: to have a UI on the back end to create custom fields visually;
  • Meta Box Group (optional): to group the field for better organization.

Let’s start now!

Create Custom Fields

As I mentioned, we will use custom fields to store video information. Here are the fields that I created for the playlist.

Structure of custom field to store video information.

Each video has a pair of two contents: one is the ID that helps to crawl the video from YouTube and display on the player; another is the title that you name the video yourselves. So, I put them into a group. A playlist also includes several videos, so this group field is made to be cloneable.

Go to Meta Box > Custom Fields and create a new field group.

Go to Meta Box > Custom Fields and create a new field group

First, add a Group field.

Add a group

Inside this group, add subfields into it.

The ID is just a part shown on the URL of the video on YouTube, not a full URL. So we will add the Text field instead of the URL type.

Add a Text field for the video ID because it’s not a full URL

Also, add this field type for the title. There are no special settings for it.

Also add the Text field for the title with no special settings.

For the group settings, I set this group as collapsible to see all videos in a clear structure.

Set the group as collapsible to see all videos in a clear structure

To easily identify the video, you can set the title for the group. Click to the icon at the end of the Group title box.

Set the title for the group to easily identify the video

There will be some suggestions to choose from:

  • {#}: to number the item;
  • id: to set the name based on the ID of the video
  • title: to set the name of the group based on the title of the video

In this practice, I choose the last one.

Choose the last one to set the name of the group based on the title of the video

Since we have several videos in the playlist, remember to set this group as cloneable. It’s an essential setting.

Set the group as cloneable

You also should enable the Sortable option to rearrange the video. It also means that you can set the order of the video on the playlist manually.

Enable the Sortable option to rearrange the video

After having all of the reasonable settings for the fields, move to the Settings tab, and set the Location to apply the fields to any post type as you want. In this practice, I’ll assign it to the blog posts.

Move to the Settings tab, and set the Location to apply the fields to any post type as you want

Then, go to the post editor, you can see the custom fields displayed.

The custom fields display in the post editor

Just input some videos and click on the + Add more to add other videos.

Click on the Add more button to add more video

In the next step, we will display the videos as a playlist with the help of MB Views.

Display the Video Playlist

First, we should create a template for the section of the video playlist.

Go to Meta Box > Views and create a new one as usual.

Go to Meta Box > Views and create a new template

Get Information of the Videos

To get data from custom fields, click on the Insert Field button, and find the fields on the right sidebar.

To get data from custom fields, click on the Insert Field button, and find them on the right sidebar

Since we applied custom fields on the post, you can see the group of fields that we created in the Post tab.

Since we applied custom fields on the post, you can see the group of fields that we created in the Post tab

Click on it and some lines of code will be generated in the Template section.

Click on the created field and some lines of code will be generated in the Template section

In there, video is the ID of the group.

Then, just choose the subfield from the list to insert them into the loop one by one.

Choose the subfield from the list to insert them into the loop one by one

Move to the Settings section of the view, and set the Type as Singular, and the Location as the post type as you assigned the custom fields to. This setting helps to assign this template to all the singular pages of the post type.

Move to the Settings section of the view, and set the Type as Singular, and the Location as the post type

As well as, you can choose a suitable position for the playlist on the page.

You can choose a suitable position for the playlist on the page

After publishing the view, go to a singular page, you can see the ID and title of the video displayed. But they are just in the text format.

The ID and title of the video are displayed on the singular page in the text format

To have a section where you have a panel to show the video in the playlist, and another one for the video player, we should add some extra code to the created template.

Display the Videos as a Playlist

Back to the view.

Besides adding some div and classes to style the playlist easily later, I will add some other code as follows to set the added data displaying as thumbnail and title in the first column:

Add some div, classes and other code

Explanation:

  • id="video-playlist" (line 4): is an HTML attribute to identify the area for displaying the list of videos.
  • img src="https://img.youtube.com/vi/{{ clone.id }}/mqdefault.jpg"/ (line 7): is the form of URL for displaying the thumbnail beside the title.
  • id: is the ID of the video that we saved in the custom field. It also helps to identify the image we want to get from YouTube.
  • class="video-name" (line 8): is the class for the title of the video that displays on the left panel.

Next, to display the iframe for the player, add the following lines of code:

Add some code to display the iframe for the player

Explanation:

In the line 14:

  • id="videoarea": is the name of the area for displaying the iframe. It will be useful for styling as well as adding action to the playlist in the next step.
  • video[0]: is to regulate the first video from the playlist to be played in default.

Finally, go to the CSS tab, and add some code to prettify the section. Notice that all the classes and IDs for the two areas in the section will be used in this code.

Add code to the CSS tab to style the playlist

Then, go to the page, the section has a new look already. However, nothing happens when you click on each title for now, because we haven’t made it.

The new look the the video playlist but nothing happens when you click on each title.

Let’s move to the next step.

Add Action to Play the Videos

Still in the created template of the playlist, we should add some extra things to the code.

Add an attribute to the title in the created template

In there:

movieurl="https://www.youtube.com/embed/{{ clone.id }}" is an attribute to recognize and record which title is clicked. It is also to identify the corresponding video URL from its ID.

Then, go to the JavaScript, and add the following code:

Add some code to the JavaScript tab

Explanation:

  • #video-playlist (line 2): is the ID of the panel that we use to display the video titles and thumbnails.
  • #videoarea (line 5): is the ID of the area to display the iframe for the player.
  • "src": $(this).find('.video-name').attr("movieurl") (line 6): is to force the iframe to change the link of the video to the right one as the movieurl attribute identified.

Combined with the code in the Template tab, we can understand that the iframe on the right panel will be turned from the default one to the one that records in the movieurl attribute. It also means that the player will play the video specified by the URL from this attribute.

I uploaded all of these codes on Github, so you can refer to it for more details.

Now, go to the page, click on a video title. You will see the player play different videos. They are the ones corresponding to the titles in the left panel.

When you click on one from the left panel, its video player will appear immediately on the side

Last Words

Displaying a video playlist on your singular page will be easier with the help of MB Views. We believe that your website can improve the bounce rate and have more new – returning visitors.

That is the way to display video as a playlist. In the case that you want to show them as a gallery, you can read more on the create a video gallery page series.

Feel free to leave a comment or your application and keep following our blog. Thanks for reading!

  • How to Display a Video Playlist - P1- Using MB Views

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  9. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  10. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Authors and Guest Posts - Using Meta Box
  13. How to Add Related Posts - Using Custom Fields
  14. How to Build a Hotel Booking Website Using Meta Box - P1
  15. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  16. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  17. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  18. How to Create a Classified Ads Website using Meta Box
  19. How to Create a Custom 404 Page in WordPress - P1 - Using Meta Box and Elementor
  20. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  21. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  22. How to Create a Product Page - P3 - Using Meta Box and Bricks
  23. How to Create a Product Page - P4 - Using Meta Box and Elementor
  24. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  25. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  26. How to Create a Product Page - P7 - Using Meta Box + Kadence
  27. How to Create a Product Page - P8 - Using Meta Box and Brizy
  28. How to Create a Product Page - P9 - Using Meta Box and Divi
  29. How to Create a Product Page using Meta Box Plugin
  30. How to Create a Reading Progress Bar in WordPress Posts - P1 - Using MB Views
  31. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  32. How to Create a Recipe - P3 - Using Meta Box and Elementor
  33. How to Create a Recipe - P4 - Using Meta Box and Bricks
  34. How to Create a Recipe - P5 - Using Meta Box and Zion
  35. How to Create a Recipe - P6 - Using Meta Box and Brizy
  36. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  37. How to Create a Recipe - P8 - Using Meta Box and Kadence
  38. How to Create a Recipe - P9 - Using Meta Box and Divi
  39. How to Create a Recipe with Meta Box Plugin
  40. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  41. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  42. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  43. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  44. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  45. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  46. How to Create a Team Members Page - P4 - Just Meta Box
  47. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  48. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  49. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  50. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  51. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  52. How to Create a Video Gallery Page - P5 - Using MB Views
  53. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  54. How to Create a Video Gallery Page Using Meta Box + Oxygen
  55. How to Create ACF Flexible Content Field with Meta Box
  56. How to Create an Auto-Updated Cheat Sheet in WordPress
  57. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  58. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  59. How to create an FAQs page - P4 - Using Meta Box and Bricks
  60. How to Create an FAQs Page - P6 - Using MB Views
  61. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  62. How to Create an FAQs Page - P8 - Using Meta Box and Kadence
  63. How to Create an FAQs Page - P9 - Using MB Blocks
  64. How to Create an FAQs Page -P3- Using Meta Box
  65. How to Create Buttons with Dynamic Link using Custom Fields
  66. How to Create Category Thumbnails & Featured Images Using Custom Fields
  67. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  68. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  69. How to Create Download and Preview Buttons - P3 - Using MB Views
  70. How to Create Download Buttons in WordPress - Using Custom Fields
  71. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  72. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  73. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  74. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  75. How to Create Notification Using Custom HTML Field
  76. How to Create Online Admission Form for School or University
  77. How to Create Online Reservation Form for Restaurants using Meta Box
  78. How to Create Reading Time to Your WordPress Posts - Using MB Views
  79. How to Create Relationships - P1 - Using Meta Box and Oxygen
  80. How to Create Relationships - P2 - Using Meta Box and Bricks
  81. How to Create Relationships - P3 - Using MB Views
  82. How to Create Relationships - P4 - Using Meta Box and Breakdance
  83. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  84. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  85. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  86. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  87. How to Display a Video Playlist - P1- Using MB Views
  88. How To Display All Listings On A Map With Meta Box
  89. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  90. How to Display Author Bio in WordPress - P2 - Using MB Views
  91. How to Display Dynamic Banners in WordPress - P3 - Using MB Views
  92. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  93. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  94. How to Display Images from Cloneable Fields - P3 - with Elementor
  95. How to Display Images from Cloneable Fields - P4 - with Bricks
  96. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  97. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  98. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  99. How to Display Product Variations - P2 - Using Meta Box and Oxygen

Leave a Reply

Your email address will not be published. Required fields are marked *