Video Playlist

We designed this custom video playlist to help you impress your visitors. Bring more traffic to your site using this video playlist developed to support auto-play, which jumps to the next video upon finishing. Adding a video playlist (YouTube or Vimeo) to your website has never been easier.

You can add a playlist to any page or template using the tagDiv Composer page builder.

After creating a page or template, while editing with the tagDiv Composer click the Add element button and drag and drop the playlist element to your page.

Video playlist - element

After adding the element to your page, the settings for it will appear in the tagDiv Composer section.

Video playlist - tagDiv Composer settings

YouTube API

The recent YouTube changes prompt you to include an API key so you need to use our guide to create and implement the API key.

YouTube Video Playlist Settings

Once you get the API out, you van set your playlist to show your content.

  • Video Playlist - customization settingsTitle: Select the title you want for your video playlist or leave it empty if you do not need a title.
  • Source: the source of the videos allows you to grab videos either from specific video IDs,  a Channel ID, a YouTube user or a specific playlist ID.
  • List of YouTube IDs: Add the ids of each individual video separated with a comma if you chose the video id from the source drop-down.
  • Channel ID: Add a channel Id in this section if you chose the channel option in the source section.
  • Username: Add the YouTube username in this section if you selected a username from the source drop-down
  • Playlist ID: Add the playlist ID in this section if you chose a playlist source.
  • Videos limit: Limit the number of videos you can show up to 50 videos
  • Autoplay: Switch on or off if you want the playlist to start automatically or not.
  • Cache: The videos can be cached if you choose to so a new request is not made for each page access.
  • Cache refresh: Select the desired number of hours for the cache reset, up to 3 days.
  • Display: Allows you to change the playlist element to either show below or aside from the main video.
  • Main video height: Change the height of the main video.
  • Playlist width: Type in the overall width of the list of videos.
  • Playlist height: Type in the height of the list of videos.
  • Playlist horizontal align: Select the alignment from left, center or right aligned list items.
  • Styling: There are a number of styling options available regarding colors and fonts for individual elements of the playlist.

How to get the video IDs.

We will provide examples of IDs for each case in particular so you know what you are looking for when searching for the ID to add.

Individual video ID:

YouTube Video ID example

The ID is found in the URL after the watch?v=  part. Ignore any other parameter after the video id starting with the “&” symbol.

 Channel ID:

Channel ID

The ID is found in the URL after the channel/ part. Do not forget to change the source type to the YouTube channel for your playlist.

Username:

User ID for building your video playlist

Access a YouTube user and you can get the username from the URL fount after the user/  part. Do not forget to change the source type to username for your playlist.

Playlist ID:

Newspaper Theme Documentation: Video playlist

Access a YouTube playlist and grab the ID from the URL found after the “playlist?list=” part. Do not forget to change the source type to “playlist id” for your playlist.