Create Custom YouTube Playlist using PHP and JavaScript

The following source code enables us to create a custom playlist with just the videos that we want to play.

 

Full Source Code :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css"/>

<style type="text/css">
  body{
    background: #ddd;
  }
  .head{
    margin-top:20px;
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center;
  }
  .container{
    margin-top:40px;
  }
  .thumb{
    width:100%;
    min-height: 90px;
  }
  .list{
    list-style-type: none;
    padding:0px;
  }
  .list li{
    cursor: pointer;
      background: #eee;
      margin-bottom: 10px;
      padding-left: 10px;
      padding-top: 5px;
      padding-bottom: 1px;
      font-weight: bold;
      font-size:15px;
  }
  .list li:hover{
    transform: translateX(10px);
  }
  .wrapper .col{
    height: 325px;
    overflow: auto;
    padding:5px;
  }
  .wrapper{
    background: #444;
  }
  .list-wrapper{
    overflow-x: hidden!important;
    background: #888;
  }
  .title{
    padding-top:20px;
  }
  .item.active{
    background: #444;
    color:#ddd;
  }
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 10px;
  }
</style>

<?php
  $videos = array(
    array(
      'id'=>'5Unq-1ky4-g',
      'title'=>"Enrique Iglesias Somebody's Me",
    ),
    array(
      'id'=>'253gydVXZrQ',
      'title'=>'Titanic - My heart will go on',
    ),
    array(
      'id'=>'Y0pdQU87dc8',
      'title'=>'Everything I Do, I Do It For You',
    ),
    array(
      'id'=>'fV4DiAyExN0',
      'title'=>'Hoobastank - The Reason',
    ),
    array(
      'id'=>'yKNxeF4KMsY',
      'title'=>'Coldplay - Yellow',
    ),
    array(
      'id'=>'vUSzL2leaFM',
      'title'=>'Wonderful Tonight - Eric Clapton',
    ),
    array(
      'id'=>'6hzrDeceEKc',
      'title'=>'Oasis - Wonderwall',
    ),
    array(
      'id'=>'EqPtz5qN7HM',
      'title'=>'Eagles - Hotel California',
    ),
    array(
      'id'=>'m_uWS6K-VF8',
      'title'=>'I will be right here waiting for you',
    )
  );
?>

<h1 class="head">
  <p>Create Custom YouTube Playlist</p>
  <p> using PHP and JavaScript</p>
</h1>
<hr>
<div class="container">
  <div class="row wrapper">
    <div class="col col-md-7">
      <iframe id="video-embed" width="100%" height="315" src="https://www.youtube.com/embed/<?php echo $videos[0]['id'];?>" frameborder="0"></iframe>
    </div>
    <div class="col col-md-5 list-wrapper">
      <ol class="list">
        <?php foreach($videos as $v){?>
          <li class="item" id="<?php echo $v['id'];?>" onclick="playVideo('<?php echo $v['id'];?>')">
            <p><?php echo $v['title'];?></p>
          </li>
        <?php } ?>
      </ul>
    </div>
  </div>
</div>

<script type="text/javascript">
  document.getElementsByClassName('item')[0].classList.add('active');
  function playVideo(id){
    items = document.getElementsByClassName('item');
    for(i=0;i<items.length;i++){
      items[i].classList.remove("active");
    }
    document.getElementById(id).classList.add('active');
    src = 'https://www.youtube.com/embed/'+id;
    document.getElementById('video-embed').setAttribute('src',src);
  }
</script>

Follow this video for complete guidance :