Video Playlists

Several pages on the site contain a video playlist component, which displays a list of YouTube videos. The playlists are stored under /sitecore/content/Wind Creek/Wind Creek/Data/Playlists


The Playlists data folder contains all the playlists on the site. Expand one of the playlists to see the individual videos in that list.


In that folder, you can select one of the playlists and set the Title. This text will be displayed at the top of the component.


Expand one of the playlists and to see the individual video items. To insert a new video, right click on the playlist and insert a new WC Video. If you want to create a new video that’s similar to an existing video, you can right click on the existing one and Duplicate it, which might be easier than creating it from scratch. You can also right click on an existing video and delete it, or you can drag and drop videos to rearrange the order. The videos will be displayed on the page in the same order they are listed in the CMS. Furthermore, the order of the videos is important because the first video receives a special design treatment. It is displayed larger with the description, view count, and publish date. The rest of the videos are displayed as smaller tiles in a scrollable list.


Each WC Video item contains a few fields that you’ll need to customize:


  • Youtube Video ID: If you browse to the video on YouTube, the ID can be pulled from the YouTube URL. For example, if the YouTube URL is https://www.youtube.com/watch?v=HapbMvTvdYk, then the video ID is HapbMvTvdYk.

  • Caption: The name of the video

  • Description: A brief description of the video

  • Thumbnail: A small thumbnail image for the video (uploaded to the media library)

  • YouTube View Count: How many people have viewed the video

  • YouTube Publish Date: When the video was published to YouTube


Some of these fields can be copied and pasted directly from the video on YouTube, or they can be customized here if you want to display something specific on the website (such as a shorter version of the title or description).


How the fields are displayed on the page


Note that each playlist can be reused on multiple pages by selecting that playlist as the data source of the component on that page. To see which pages a playlist is being displayed on, select the playlist, then click the Links button in the Navigate tab at the top of the content editor.


The Links menu on the Navigate tab shows all the pages that are displaying this playlist

Pulling Playlists from YouTube

Using the approach above allows you to manually build playlists in Sitecore, which gives you full control over which videos are included, the video titles, order, etc.


It’s also possible to automatically pull in a playlist from YouTube. This loads all the video data directly from YouTube, so you don’t have to manually create this content in the CMS. Most importantly, it automatically keeps the list up to date as new videos are added to YouTube.


To use this feature, you use the same WC Playlist content type in the playlist folder (/sitecore/content/Wind Creek/Wind Creek/Data/Playlists). However, instead of inserting WC Video items underneath it, you simply enter the YouTube Playlist ID. If you browse to the playlist on YouTube, you can get the ID from the URL.


For example, if the YouTube playlist URL is https://www.youtube.com/playlist?list=PLTre6ZJMc2ZtVFxB3kQU-3JZBQfUNkpE5, the ID would be PLTre6ZJMc2ZtVFxB3kQU-3JZBQfUNkpE5.


You can also set the Max Number of Videos to display. If you leave this field blank, it will pull in all the videos from the YouTube playlist, up to a maximum of 50.


Make sure you define the YouTube Playlist ID and Max Number of Videos


After setting the playlist ID and number of videos, you also need to configure the component to use a different rendering variant. Open the page in the Experience Editor, select the component, and set the variant to YouTube Playlist (rather than Video Playlist as described in the previous section). This tells Sitecore to use the automatic behavior described here, instead of using a manually created playlist in the CMS.


To automatically pull video data from YouTube, set the rendering variant to YouTube Playlist