JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

<html>
  <head>
  <title>Search</title>
  </head>
	
  <body>
    <div id="buttons">
    <label> <input id="query" value='cats' type="text"/><button id="search-button"   onclick="keyWordsearch()">Search</button></label>    
    <div id="container">
      <h1>Search Results</h1>
      <ul id="results"></ul>

  <script>
     function keyWordsearch(){
        gapi.client.setApiKey('AIzaSyAb9MW_I8wmlen7cR9Zfc2b8b03Xa75RFc');
        gapi.client.load('youtube', 'v3', function() {
                makeRequest();
        });
}
    function makeRequest() {
        var q = $('#query').val();
        var request = gapi.client.youtube.search.list({
                q: q,
                part: 'snippet', 
                maxResults: 6
        });
        request.execute(function(response)  {                                                                                    
                $('#results').empty()
                var srchItems = response.result.items;                
                $.each(srchItems, function(index, item) {
                vidTitle = item.snippet.title;  
                vidThumburl =  item.snippet.thumbnails.default.url;
                vidID =   item.id.videoId;
                vidurl = "https://www.youtube.com/watch?v=" + vidID;
                vidThumbimg = '<pre><img id="thumb" src="'+vidThumburl+'" alt="No  Image Available." style="width:204px;height:128px"></pre>';                   

                
                $('#results').append('<a>' + vidTitle + vidThumbimg + vidID +'</a>' + '<a id="playlist" onclick=addVideo("'+vidurl+'")>https://www.youtube.com/watch?v=' + vidID +'<h2>' + vidTitle + '</h2></a>'); 
                
 	
               
        })  
    })  
}
  </script> 
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="https://apis.google.com/js/client.js?onload=googleApiClientReady">  </script>
  </div>
  </div>
</body>



<style>
#mydiv {
  position: -webkit-sticky;
position:...