Horizontal Responsive Playlist

horizontal-responsive-playlist.markdown

Horizontal Responsive Playlist

You will see the horizontal playlist below the player. If you resize your browser, you will see the player and playlist both resize.

A Pen by Brightcove Learning Services on CodePen.

License.

index.html

  <div style="display: block; position: relative; max-width: 100%;">
    <div style="padding-top: 56.25%;">
      <video-js id="myPlayerID"
        data-playlist-id="2764931906001"
        data-account="1752604059001"
        data-player="H1TMG31PW"
        data-embed="default"
        data-application-id
        class="video-js"
        controls
        style="width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;"></video-js>
    </div>
  </div>

  <script src="https://players.brightcove.net/1752604059001/H1TMG31PW_default/index.min.js"></script>
  <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

script.js

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this,
    playlistData,
    playlistItems,
    videoItem,
    itemTitle,
    itemInnerDiv,
    playlistWrapper;

  // +++ Create div for playlist +++
  myPlayer.one('loadstart', function() {
    playlistWrapper = document.createElement('div');
    playlistWrapper.className = "bcls-playlist-wrapper";
  });

  // +++ Manually create playlist +++
  myPlayer.one('loadedmetadata', function() {
    // Assign current playlist data to variable
    playlistData = myPlayer.playlist();

    // Place playlist wrapper in DOM just below player
    myPlayer.el().parentNode.appendChild(playlistWrapper);
    //Highlights the current playlist item
    function clearHighlight() {
      var i,
        iMax = playlistItems.length;
      for (i = 0; i < iMax; i++) {
        playlistItems[i].setAttribute('style', '2px solid #141B17');
      }
    }

    // Sets highlight for selected/playing video
    function setHighlight() {
      var index = myPlayer.playlist.currentItem();
      // Override the background color
      playlistItems[index].setAttribute('style', 'border:2px solid #80CBC4;');
    }

    //Loads a playlist item that was clicked upon
    function loadPlaylistItem() {
      // Item index in playlist array
      var index = parseInt(this.getAttribute('data-playlist-index'), 10);
      myPlayer.playlist.currentItem(index);
      myPlayer.play();
    }

    playlistWrapper.style.width = myPlayer.width() + "px";

    // +++ Create playlist items and add to playlist +++
    for (i = 0; i < playlistData.length; i++) {
      videoItem = playlistData[i];

      // create the playlist item and set its class and style
      playlistItem = document.createElement('div');
      playlistItem.setAttribute('data-playlist-index', i);
      playlistItem.setAttribute('class', 'bcls-playlist-item');

      // create the inner div and set class and style
      itemInnerDiv = document.createElement('div');
      itemInnerDiv.setAttribute('class', 'bcls-item-inner-div');
      itemInnerDiv.setAttribute('style', 'background-image:url(' + videoItem.thumbnail + ');');

      // create the title and set its class
      itemTitle = document.createElement('span');
      itemTitle.setAttribute('class', 'bcls-title');

      // add the video name to the title element
      itemTitle.appendChild(document.createTextNode(videoItem.name));

      // Now append the title to the innerdiv,
      // the innerdiv to the item,
      // and the item to the playlist
      itemInnerDiv.appendChild(itemTitle);
      playlistItem.appendChild(itemInnerDiv);
      playlistWrapper.appendChild(playlistItem);
    }

    // Create the left and right arrows
    var left = document.createElement("div");
    var right = document.createElement("div")
    left.setAttribute('id', 'left-arrow');
    right.setAttribute('id', 'right-arrow');
    var parentElement = document.getElementsByClassName("bcls-playlist-wrapper");
    parentElement[0].insertAdjacentElement('afterbegin', left);
    parentElement[0].insertAdjacentElement('afterbegin', right);
    document.getElementById('left-arrow').innerHTML = '<';
    document.getElementById('right-arrow').innerHTML = '>';
    $(".bcls-playlist-item").wrapAll("<div class='list-container'></div>");
    $(".bcls-playlist-item").wrapAll("<div class='list'></div>");
    var $item = $('div.bcls-playlist-item'), //Cache your DOM selector
      visible = 1, //Set the number of items that will be visible
      index = 0, //Starting index
      endIndex = ($item.length / visible) - 1; //End index

    // Add click events to arrows
    $('div#right-arrow').on('click', (function() {
      if (index < endIndex) {
        index++;
        $item.animate({
          'right': '+=124px'
        });
        console.log(index);
      }
    }));
    $('div#left-arrow').click(function() {
      if (index > 0) {
        index--;
        $item.animate({
          'right': '-=124px'
        });
        console.log(index);
      }
    });

    // Change highlighted item when video begins playing
    myPlayer.on('play', function() {
      clearHighlight();
      setHighlight();
    });

    // Set click listeners on playlist items
    playlistItems = document.getElementsByClassName('bcls-playlist-item');
    iMax = playlistItems.length;
    for (i = 0; i < iMax; i++) {
      playlistItems[i].addEventListener('click', loadPlaylistItem);
    }
  });
});

style.css

/* * The body style is just for the
 * background color of the codepen.
 * Do not include in your code.
 */
body {
  background-color: #111;
  color: #fff;
}
/*
 * Styles essential to the sample
 * are below
 */
/* Style for the div that wraps the playlist*/
.bcls-playlist-wrapper {
  position: relative;
  background-color: #141b17;
  /*max-width: 100%;*/
  width: 100% !important;
  /*max-height: 95px;
      min-height: 82px;*/
  line-height: 76px;
  text-align: center;
  overflow-x: hidden;
  overflow-y: hidden;
  position: absolute;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

/* Style for the divs that make up the playlist items*/
.bcls-playlist-item {
  display: inline-block;
  border: 2px solid #141b17;
  padding: 0;
  margin: 0;
  height: 74px;
  width: 124px;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
}

/* Style for the divs that make up the playlist item inner div */
.bcls-item-inner-div {
  background-size: cover;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  vertical-align: middle;
}

/* Mouse over style for items */
.bcls-playlist-item:hover {
  border-color: #ff0000;
}

/* Style for the thumbnail images*/
.bcls-title {
  color: #fff;
  font-size: 0.7em;
  font-family: sans-serif;
  font-weight: bold;
  max-width: 124px;
  width: 124px;
  height: 66px;
  margin-top: 30%;
  text-align: center;
  cursor: pointer;
}

/* Style for playlist's left arrow */
#left-arrow {
  color: aliceblue;
  font-size: 40px;
  position: absolute;
  margin: auto;
  background: rgba(245, 41, 5, 1);
  left: 0;
  z-index: 1;
  cursor: pointer;
}

/* Style for playlist's right arrow */
#right-arrow {
  color: aliceblue;
  font-size: 40px;
  position: absolute;
  margin: auto;
  background: rgba(245, 41, 5, 1);
  right: 0;
  z-index: 1;
  cursor: pointer;
}