mdyBWdq

index.html

<div class="container">

  <div id="player">
    <div class="js-player" data-type="vimeo" data-video-id=""></div>
  </div>


  <!--   <ul id="playlist"></ul> -->
</div>
  <script src="https://cdn.plyr.io/2.0.13/plyr.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.4.7/plyr.min.js"></script> -->

mdybwdq.markdown

mdyBWdq

A Pen by Akshay on CodePen.

License.

script.js

var addbuttons = true ;

var players = plyr.setup(".js-player");

/* PLAYLIST  */
var myPlaylist = [
  {
    type: "vimeo",
    title: "Charlie Puth - Attention [Official Video]",
    author: "Charlie Puth",
    sources: [{
      src: "https://vimeo.com/14074949",
      type: "vimeo"
    }],
    src: "https://vimeo.com/14074949",
    poster: "https://img.youtube.com/vi/nfs8NYg7yQM/hqdefault.jpg"
  },
  {
    type: "vimeo",
    title: "Armin van Buuren live at Ultra Music Festival Miami 2017",
    author: "Armin van Buuren",
    sources: [{
      src: "https://vimeo.com/81233957",
      type: "vimeo"
    }],
    poster: "https://img.youtube.com/vi/cLcKew4cQq4/hqdefault.jpg"
  },
  {
    type: "vimeo",
    title: "2 hours Trance Music - Armin Van Buuren",
    author: "Armin van Buuren",
    sources: [{
      src: "https://vimeo.com/81233957",
      type: "vimeo"
    }],
    poster: "https://img.youtube.com/vi/r6KXy0j85AM/hqdefault.jpg"
  },
];

var target = ".js-player";
var limit = 30;

$(document).ready(function(){
  loadPlaylist(target, myPlaylist);  // LOAD YOUTUBE OR USER VIDEO LIST

}); // JQUERY READY END

function loadPlaylist(target, myPlaylist) {

  $("li.pls-playing").removeClass("pls-playing");
  $(".plyr-playlist-wrapper").remove();


  limit = limit-1;


  if (myPlaylist) {

    PlyrPlaylist(".plyr-playlist", myPlaylist, limit);
    //return
  }

  function PlyrPlaylist(target, myPlaylist, limit) {
    $('<div class="plyr-playlist-wrapper"><ul class="plyr-playlist"></ul></div>').insertAfter("#player");

    var startwith = 0; // Maybe a playlist option to start with choosen video

    var playingclass = "";
    var items = [];
    $.each(myPlaylist, function(id, val) {

      if (0 === id) playingclass = "pls-playing";
      else playingclass = "";

      items.push(
        '<li class="' +playingclass +'"><a href="#" data-type="' +val.sources[0].type +'" data-video-id="' +val.sources[0].src +'"><img class="plyr-miniposter" src="' + val.poster + '"> ' +
val.title +" - " +val.author +"</a></li> ");

      if (id == limit)
        return false;

    });
    $(target).html(items.join(""));
  }

  players[0].on("ready", function(event) {
    //$(".plyr-playlist .pls-playing").find("a").one().trigger("click");
    console.log("Ready.....................................................");
    players[0].play();


    if(addbuttons){

      $(".plyr-playlist .pls-playing").find("a").trigger("click");

      $('<button type="button" class="plyr-prev"><i class="fa fa-step-backward fa-lg"></i></button>').insertBefore('.plyr__controls [data-plyr="play"]');

      $('<button type="button" class="plyr-next"><i class="fa fa-step-forward fa-lg"></i></button>').insertAfter('.plyr__controls [data-plyr="pause"]');

      addbuttons = false ;
    }

  }).on("ended", function(event) {
    var $next = $(".plyr-playlist .pls-playing")
      .next()
      .find("a")
      .trigger("click");
    //$next.parent().addClass("pls-playing");
  });


  $(document).on("click", "ul.plyr-playlist li a", function(event) {
    event.preventDefault();

    $("li.pls-playing").removeClass("pls-playing");
    $(this)
      .parent()
      .addClass("pls-playing");

    var video_id = $(this).data("video-id");
    var video_type = $(this).data("type");
    var video_title = $(this).text();

    //alert(video_id);

    players[0].source({
      type: "video",
      title: "video_title",
      sources: [{ src: video_id, type: video_type }]
    });

    // $(".plyr-playlist").scrollTo(".pls-playing", 300);

  })
  .on("click", ".plyr-prev", function(event) {
    var $next = $(".plyr-playlist .pls-playing")
      .prev()
      .find("a")
      .trigger("click");
  })
  .on("click", ".plyr-next", function(event) {
    var $next = $(".plyr-playlist .pls-playing")
      .next()
      .find("a")
      .trigger("click");
  });

}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.css

/* button[data-plyr="play"]:before {
   font-family: FontAwesome;
   content: "\f048";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
}
button[data-plyr="play"]:after {
   font-family: FontAwesome;
   content: "\f051";
   display: inline-block;
   padding-left: 3px;
   vertical-align: middle;
} */

.container {
  max-width: 600px;
  margin: 2rem auto;
}

/* Playlist  */
/* scrollbar rules have to be separate, browsers not supporting this syntax will skip them when combined. */
.plyr-playlist-wrapper ul::-webkit-scrollbar {
  width: 6px;
}

.plyr-playlist-wrapper ul::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

.plyr-playlist-wrapper ul::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
   background: #fff;
/*   background: white; */
}
.plyr-playlist-wrapper {
/*   background: rgba(0, 0, 0, 0.8); */
  background: white;
  position: relative;
  padding: 0.5em 0.5em 0.5em 0.25em;
}
.plyr-playlist-wrapper .plyr-playlist {
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* position: absolute;
  right: 65px;
  bottom: 100%; */
  position: relative;
  margin-top: 0;
  padding: 6px 4px;
  width: 100%;
  box-sizing: border-box;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 8px 0px inset;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 8px 0px inset;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 8px 0px inset;
}

.plyr-playlist-wrapper ul {
  padding: 0;
  margin: 0;
  max-height: 12em;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.plyr-playlist-wrapper ul li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.plyr-playlist-wrapper .plyr-playlist li {
  list-style: none;
  background-color: rgba(255, 255, 255, 0.03);
  padding: 0px;
  margin-bottom: 3px;
  font-size: 90%;
}

.plyr-playlist-wrapper .plyr-playlist li.pls-playing,
.plyr-playlist-wrapper .plyr-playlist li:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.09);
}
.plyr-playlist-wrapper .plyr-playlist li.pls-playing a {
  color: black;
}

/* .plyr-playlist li:hover {
  background-color: rgba(255, 255, 255, 0.09);
} */

.plyr-playlist-wrapper .plyr-playlist li a {
  text-decoration: none;
  font-family: arial;
  color: #c9c9c9;
  display: block;
  padding: 10px 0;
  outline: none;
  padding: 0.5em 0.25em 0.5em 0.75em;
  /*margin-right: 0.5em;*/
  font-size: 90%;
  vertical-align: middle;
  padding-bottom: 10px;
}

.plyr-playlist-wrapper .plyr-playlist li:last-child a {
  border-bottom: 0;
}

.plyr-playlist li a:hover,
.plyr-playlist li a:focus,
.plyr-playlist li a:active {
  color: #04a9f3;
  /*  color: #00c85f;*/
  /*   text-decoration: none; */
}

.plyr-miniposter {
  width: auto;
  height: 22px;
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  float: left;
  margin-right: 10px;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}

/*******************/

.plyr-type-playlist plyr-playlist a.plyr-playlist-item-remove {
  float: right;
  margin-right: 15px;
  /*font-weight: bold;*/
  background-color: transparent;
}


/* PREVIOUS NEXT BUTTON */

.plyr-prev {
  margin-right: 0 !important;
}
.plyr-next {
  margin-left: 0 !important;
}
.plyr__controls [data-plyr="play"] {
  margin-left: 0 !important;
}
/*
.plyr-next:before {
  fa-step-backward
  content: "\f048";
}
*/


/* YOUTUBE HIDE BLACK BARS https://stackoverflow.com/a/33604743/211324 */
/* https://jsfiddle.net/onigetoc/nomzb6hf/ */

styles

<link href="https://cdn.plyr.io/2.0.13/plyr.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />