JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<html>
  <head>
        <title>Youtube API</title>
        <script src="js/jquery.js"></script>
        <script src="js/script_api.js"></script>
        <link rel="stylesheet" href="stylesheet.css">
  </head>

  <body>
        <div id="container">
        <h1>Youtube Results</h1>
        <ul id="results"></ul>
        </div>    
  </body>
</html>

CSS

/* CSS DOCUMENT */
body{
   background: #f4f4f4;
   font-family: 'Arial', sans-serif;
   font-size: 14px;
   color: red;
}

#container{
  width:800px;
  height: auto;
  margin: auto;
  overflow: auto;
  background: #666;
}

JavaScript

var ChannelName = 'Nightblue3';
var API_Key = 'AIzaSyDXCL8TMY7HK2yNBBGbhH2HhTBpS5u6Ifc';
var vidWidth = 500;
var vidHeight = 400;
var vidResults = 3;

$(document).ready(function(){
    $.get(
        "https://www.googleapis.com/youtube/v3/channels",{
            part: 'contentDetails',
            forUsername: ChannelName,
            key: API_Key },
        
            function(data){
            $.each(data.items, function(i, item){
                    console.log(item);
                    pid = item.contentDetails.relatedPlaylists.uploads;
                    getVids(pid);
                })
            }
    );
    
    function getVids(pid){
        $.get(
        "https://www.googleapis.com/youtube/v3/playlistItems",{
            part: 'snippet',
            maxresults: vidResults,
            playlistId: pid,
            key: API_Key},
            function(data){
                var output;
                $.each(data.items, function(i, item){
                    console.log(item);
                    videoId = item.snippet.resourceId.videoId;
                    
                    output = '<li><iframe height="'+vidHeight+'" width="'+vidWidth+'" src=\"//www.youtube.com/embed/'+videoId+'\"></iframe></li>';
                    
                    //Append to results listStyleType
                    $('#results').append(output);
                })
            }
        );    
    }
});