Video playlists

Written by Marissa Cookson

How do I create a video playlist with a description for each video?

You want to create an editable playlist with a custom description for each video using jQuery. The video description should update when you click on a playlist item.


Live demo:

Part 1: The video descriptions

Create an empty container for a list of video descriptions. These will be populated by Perch and only one list item will be visible based on the current video that’s playing. Default markup and css:

    <ul class="video-descriptions">
        <?php perch_content('Videos'); ?>

    .video-descriptions li {
        display: none;
    .video-descriptions li:first-child {
        display: block;

Create a video_list.html template inside perch/templates/content.

This is a repeater block which will allow the editor to add multiple videos and reorder them. The video-url is used to populate the playlist. These links are not visible on the page as they’re empty. No need for a p tag around the description content because this is added by Textile formatting.

    <perch:repeater id="Videos" label="Videos">
                <a class="video-url"
        href="<perch:content id="video-url" type="text" label="Video URL" required>"></a>
                <h3><perch:content id="video-title" type="text" label="Video Title"></h3>
                <perch:content id="video-description"
        type="textarea" label="Video Description" textile html >

Part 2: The video playlist

Dynamically build a playlist based on the video links entered in Perch.

Video player markup:

    <div id="rp_plugin">
        <div id="rp_videoContainer">
            <div id="rp_video"></div>
        <div id="rp_playlistContainer">

Append a ul to the playlist container since an empty ul in the markup is invalid:

$('#rp_playlistContainer').append('<ul id="rp_playlist">');

For each video description item, get the video url and push it to a videoLinks array. Append an empty playlist item so there is an equal number of descriptions and videos:

    var videoLinks = [];
    $('.video-descriptions li').each(function(){
        var videoUrl = $('.video-url',this);

For each empty playlist item, append the corresponding video link from the videoLinks array:

    $('#rp_playlist li').each(function(i){

Init video player (feel free to substitute your own. If yours doesn’t have an onChange event, listen for a click event on each playlist item instead).

onChange: Wait until the player has updated the current video, then get the index of the current video and show its corresponding video description. Hide the other descriptions.

        onChange: function(){
                    var currIndex = $('#rp_playlist li.rp_currentVideo').index();
                    $('.video-descriptions li:eq('+currIndex+')').show();
                    $('.video-descriptions li:eq('+currIndex+')').siblings().hide();