/TypeScript/Embed youtube search results into website

Embed youtube search results into website

<!doctype 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>
    </div>           
<script>
 function keyWordsearch(){
    gapi.client.setApiKey('api_key_here');
    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: 10
    });
    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;                 
            vidThumbimg = '<pre><img id="thumb" src="'+vidThumburl+'" alt="No  Image  Available." style="width:204px;height:128px"></pre>';                   

            $('#results').append('<pre>' + vidTitle + vidThumbimg +   '</pre>');                      
    })  
  })  
}
 </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>
</body>
</html>

Source: stackoverflow.com

Similar codes

0 vote207 views1 answer
Error on indexing the object in ts
TypeScript
0 vote214 views1 answer
How to pass node arguments in nextjs
TypeScript
0 vote219 views4 answers
Error TS7052: Element implicitly has an 'any' type because type 'AbstractControl' has no index signature
TypeScript
1 vote214 views1 answer
Angular jasmin mock http response
TypeScript
42 votes202 views10 answers
Youtube
TypeScript
12 votes222 views3 answers
If shorthand typescript
TypeScript
31 votes206 views1 answer
Microsoft execution policies
TypeScript
0 vote209 views1 answer
Python requests exceptions
TypeScript
6 votes202 views1 answer
An unhandled exception occurred: Cannot find module '@angular-devkit/build-angular/package.json' Require stack:
TypeScript
3 votes217 views1 answer
For of loop in ts with index
TypeScript