youtube playlst

body {
     margin: 30px;
     padding: 0;
     background: #ddd;
     font-family: Arial, Helvetica, sans-serif;
    }

.title {
     width: 100%;
     max-width: 854px;
     margin: 0 auto;
    }

.caption {
     width: 100%;
     max-width: 854px;
     margin: 0 auto;
     padding: 20px 0;
    }

.container {
     width: 100%;
     max-width: 854px;
     min-width: 440px;
     background: #fff;
     margin: 0 auto;
    }

/*  VIDEO PLAYER CONTAINER
   ############################### */
    .vid-container {
      position: relative;
      padding-bottom: 52%;
      padding-top: 30px; 
      height: 0; 
  }
   
  .vid-container iframe,
  .vid-container object,
  .vid-container embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }

/*  VIDEOS PLAYLIST 
   ############################### */
  .vid-list-container {
   width: 92%;
   overflow: hidden;
   margin-top: 20px;
   margin-left:4%;
   padding-bottom: 20px;
  }

.vid-list {
   width: 1344px;
   position: relative;
   top:0;
   left: 0;
  }

.vid-item {
   display: block;
   width: 148px;
   height: 148px;
   float: left;
   margin: 0;
   padding: 10px;
  }

.thumb {
   /*position: relative;*/
   overflow:hidden;
   height: 84px;
  }

.thumb img {
   width: 100%;
   position: relative;
   top: -13px;
  }

.vid-item .desc {
   color: #21A1D2;
   font-size: 15px;
   margin-top:5px;
  }

.vid-item:hover {
   background: #eee;
   cursor: pointer;
  }

.arrows {
   position:relative;
   width: 100%;
  }

.arrow-left {
   color: #fff;
   position: absolute;
   background: #777;
   padding: 15px;
   left: -25px;
   top: -130px;
   z-index: 99;
   cursor: pointer;
  }

.arrow-right {
   color: #fff;
   position: absolute;
   background: #777;
   padding: 15px;
   right: -25px;
   top: -130px;
   z-index:100;
   cursor: pointer;
  }

.arrow-left:hover {
   background: #CC181E;
  }

.arrow-right:hover {
   background: #CC181E;
  }

@media (max-width: 624px) {
   body {
    margin: 15px;
   }
   .caption {
    margin-top: 40px;
   }
   .vid-list-container {
    padding-bottom: 20px;
   }

/* reposition left/right arrows */
   .arrows {
    position:relative;
    margin: 0 auto;
    width:96px;
   }
   .arrow-left {
    left: 0;
    top: -17px;
   }

.arrow-right {
    right: 0;
    top: -17px;
   }
  }

</style>

</head>

<body>
   <div class="title"><h2>Demo: Responsive YouTube Player with Scrolling Thumbnail Playlist</h2></div>

<div class="vid-container">
      <iframe id="vid_frame" src="http://www.youtube.com/embed/eg6kNoJmzkY?rel=0&showinfo=0&autohide=1" frameborder="0" width="560" height="315"></iframe>
  </div>

<div class="vid-list-container">
         <div class="vid-list">
           
              <div class="vid-item" onClick="document.getElementById('vid_frame').src='http://youtube.com/embed/eg6kNoJmzkY?autoplay=1&rel=0&showinfo=0&autohide=1'">
                <div class="thumb"><img src="http://img.youtube.com/vi/eg6kNoJmzkY/0.jpg"></div>
                <div class="desc">Jessica Hernandez & the Deltas - Dead Brains</div>
              </div>
            
              <div class="vid-item" onClick="document.getElementById('vid_frame').src='http://youtube.com/embed/_Tz7KROhuAw?autoplay=1&rel=0&showinfo=0&autohide=1'">
                <div class="thumb"><img src="http://img.youtube.com/vi/_Tz7KROhuAw/0.jpg"></div>
                <div class="desc">Barbatuques - CD Tum Pá - Sambalelê</div>
              </div>

<div class="vid-item" onClick="document.getElementById('vid_frame').src='http://youtube.com/embed/F1f-gn_mG8M?autoplay=1&rel=0&showinfo=0&autohide=1'">
                <div class="thumb"><img src="http://img.youtube.com/vi/F1f-gn_mG8M/0.jpg"></div>
                <div class="desc">Eleanor Turner plays Baroque Flamenco</div>
              </div>

<div class="vid-item" onClick="document.getElementById('vid_frame').src='http://youtube.com/embed/fB8UTheTR7s?autoplay=1&rel=0&showinfo=0&autohide=1'">
                <div class="thumb"><img src="http://img.youtube.com/vi/fB8UTheTR7s/0.jpg"></div>
                <div class="desc">Sleepy Man Banjo Boys: Bluegrass</div>
              </div>

<div class="vid-item" onClick="document.getElementById('vid_frame').src='http://youtube.com/embed/0SNhAKyXtC8?autoplay=1&rel=0&showinfo=0&autohide=1'">
                <div class="thumb"><img src="http://img.youtube.com/vi/0SNhAKyXtC8/0.jpg"></div>
                <div class="desc">Edmar Castaneda: NPR Music Tiny Desk Concert</div>
              </div>

<div class="vid-item" onClick="document.getElementById('vid_frame').src='http://youtube.com/embed/RTHI_uGyfTM?autoplay=1&rel=0&showinfo=0&autohide=1'">
                <div class="thumb"><img src="http://img.youtube.com/vi/RTHI_uGyfTM/0.jpg"></div>
                <div class="desc">Winter Harp performs Caravan</div>
              </div>
            
              <div class="vid-item" onClick="document.getElementById('vid_frame').src='http://youtube.com/embed/abQRt6p8T7g?autoplay=1&rel=0&showinfo=0&autohide=1'">
                <div class="thumb"><img src="http://img.youtube.com/vi/abQRt6p8T7g/0.jpg"></div>
                <div class="desc">The Avett Brothers Tiny Desk Concert</div>
              </div>

<div class="vid-item" onClick="document.getElementById('vid_frame').src='http://youtube.com/embed/fpmN9JorFew?autoplay=1&rel=0&showinfo=0&autohide=1'">
                <div class="thumb"><img src="http://img.youtube.com/vi/fpmN9JorFew/0.jpg"></div>
                <div class="desc">Tracy Chapman - Give Me One Reason</div>
              </div>

</div>
        </div>

<div class="arrows">
         <div class="arrow-left"><i class="fa fa-chevron-left fa-lg"></i></div>
         <div class="arrow-right"><i class="fa fa-chevron-right fa-lg"></i></div>
        </div>

</div>

<script type="text/javascript">
    $(document).ready(function () {
      $(".arrow-right").bind("click", function (event) {
          event.preventDefault();
          $(".vid-list-container").stop().animate({
              scrollLeft: "+=336"
          }, 750);
      });
      $(".arrow-left").bind("click", function (event) {
          event.preventDefault();
          $(".vid-list-container").stop().animate({
              scrollLeft: "-=336"
          }, 750);
      });
  });
   </script>