Cacher is the code snippet organizer for pro developers

$(document).ready(function(){

  
  var userName = '{{ insert youtube username here }}';
  var apiKey   = '{{ insert api key here }}';
    
    
  //-------------------------------------------------------------------
  // Get Uploads Playlist ID
  //-------------------------------------------------------------------

  $.get(
    "https://www.googleapis.com/youtube/v3/channels",{
      part : 'contentDetails', 
      forUsername : userName,
      async: false,
      key: apiKey},
    function(data) {
      $.each( data.items, function( i, item ) {
        pid = item.contentDetails.relatedPlaylists.uploads;
        getVids(pid);
        console.log(pid);
        console.log(item.contentDetails.relatedPlaylists);
      });
    }
  );



  //-------------------------------------------------------------------
  //Get VideosIds from Playlist ID
  //-------------------------------------------------------------------

  function getVids(pid){
    $.get(
      "https://www.googleapis.com/youtube/v3/playlistItems",{
        part : 'snippet', 
        maxResults : 24,
        async: false,
        playlistId : pid,

        key: apiKey},
      function(data) {
        var results;
        var videoIds;
        $.each( data.items, function( i, item ) {
          videoIds = item.snippet.resourceId.videoId;
          getVideoDetails(videoIds);
        });
      }
    );
  }



  //-------------------------------------------------------------------
  //Get Videos from IDs
  //-------------------------------------------------------------------


  function getVideoDetails(videoIds){
    $.get(
      "https://www.googleapis.com/youtube/v3/videos",{
        part : 'snippet, statistics',
        id: videoIds,
        async: false,
        key: apiKey},
      function(data) {
        var videoObject;
        var videoPublishDate;
        $.each( data.items,  function( i, item ) {
          videoPublishDate = item.snippet.publishedAt;
          videoPublishDateFormatted = videoPublishDate.split('T')[0];
          videoPublishDateYear = videoPublishDateFormatted.split('-')[0];
          videoPublishDateMonth = videoPublishDateFormatted.split('-')[1];
          videoPublishDateDay = videoPublishDateFormatted.split('-')[2];
          
          videoObject = '<a class="video-card grid-item grid-3" data-publish-date="'+ videoPublishDateFormatted +'" href="https://www.youtube.com/watch?v='+ item.id +'" data-mfp-src="https://www.youtube.com/watch?v='+ item.id +'"><img src="'+ item.snippet.thumbnails.medium.url +'" alt="'+ item.snippet.title +'" /><h2>'+ item.snippet.title +'</h2><h4>'+ item.statistics.viewCount +' views</h4><p>'+ item.snippet.description +'</p></a>';
          $('#video-feed').append(videoObject);
          $('.video-card p').succinct({size: 120});
          $('.video-card').magnificPopup({
              disableOn: 700,
              type: 'iframe',
              preloader: false,
              fixedContentPos: false
          });
        });
      }
    );
  }
});

<div id="video-feed"></div>

This uses the api to pull a feed from the uploads of a channel.  It uses the legacy username, so it might need to be changed a bit to use the channel id instead.  You'll need the following dependencies...

- jquery.succinct.js
- magnific-popup.js



Important docs:

  - https://developers.google.com/youtube/v3/docs/videos/list#parameters
  
  - https://developers.google.com/youtube/v3/docs/channels/list#parameters
  
  - https://developers.google.com/apis-explorer/?hl=en_US#p/youtube/v3/