eYvyWJe

eyvywje.markdown

eYvyWJe

A Pen by Edward Lance Lorilla on CodePen.

License.

index.html

<div id="contents">
  <div id="player"></div>
  <ul id="thumbnail"></ul>
</div>

script.js

var ytWidth = 640;
var ytHeight = 390;
var ytData = [
  ];
function getVids(pid){
  ytData = [] 
  $.get(
  "https://www.googleapis.com/youtube/v3/playlistItems",{
    part : 'snippet', 
    maxResults : 20,
    playlistId : 'UUWc48sSzqPLUOfNCy9sxUug',
    key: 'AIzaSyAXAjXrgSbORb7EgdgaQf-Y7b5LAtDF09I'},
    function(data) {
      console.log(data)
      var results;
      $.each( data.items, function( i, item ) {
        regex = new RegExp(/\/vi\/(.*)\//);
        url =  item.snippet.thumbnails.default.url;
        id = url.match(regex)[1];
        ytData.push({id: id})
      });
      ytBaseUrl = 'https://www.youtube.com/embed/';
      
      
      var thumbInsert = '';
      for(var i = 0; i < ytData.length; i++) {
        thumbInsert += '<li><a href="' + ytBaseUrl + ytData[i]['id'] + '">';
        thumbInsert += '<img src="http://img.youtube.com/vi/' + ytData[i]['id'] + '/mqdefault.jpg" alt="" />';
        thumbInsert += '</a></li>';
      }
      
      var ytPlayer;
      
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      
      
      
      
      $(function() {
        
        $('#thumbnail').append(thumbInsert);
        
        $(document).on('click', '#thumbnail a', function() {
          ytId = $(this).attr('href').replace(ytBaseUrl, '');
          play(ytId, 0);
          return false;
        });
      });
      
      
      
      
    }
    );
} 
function onYouTubeIframeAPIReady() {
  ytPlayer = new YT.Player('player', {
    height: ytHeight,
    width: ytWidth,
    videoId: ytData[0]['id']
  });
}
function play(ytId, seekTime) {
  ytPlayer.loadVideoById(ytId, seekTime);
}
getVids()

scripts

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

style.css

@charset "utf-8";

body {
  margin: 0;
  padding: 0;
}
#contents {
  width: 840px;
  margin: 0 auto;
  padding-top: 20px;
}
#player {
  float: left;
}
#thumbnail {
  float: right;
  width: 160px;
  margin: 0;
  padding: 0;
}
#thumbnail li {
  list-style: none;
  margin-bottom: 7px;
}
#thumbnail li img {
  width: 100%;
  height: auto;
}
.back {
  clear: both;
  padding-top: 40px;
}
}
}
}
}
}
}
}