title: requesting video from YouTube API to be played in HTML page
body: <p>I'm trying to request videos from YouTube API but I'm only getting the title of the video and its thumbnail. how can i play the video ? </p>
  
  <p><strong>Note</strong>: I'm using the YouTube documentation in html and JavaScript</p>
  
  <p>I've tried to use item.snippet.player.embedHtml and put it in  but nothing were shown.</p>
  
  <p><strong>This is my code:</strong></p>
  
  <pre><code>  &lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
    &lt;title&gt;Search&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="buttons"&gt;
      &lt;label&gt; &lt;input id="query" type="text"/&gt;&lt;button id="search-button"   onclick="keyWordsearch()"&gt;Search&lt;/button&gt;&lt;/label&gt;    
      &lt;div id="container"&gt;
        &lt;h1&gt;Search Results&lt;/h1&gt;
        &lt;ul id="results"&gt;&lt;/ul&gt;
      &lt;/div&gt;           
      &lt;script&gt;
       function keyWordsearch(){
          gapi.client.setApiKey('');
          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: 1
          });
          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 = '&lt;pre&gt;&lt;img id="thumb" src="'+vidThumburl+'" alt="No  Image Available." style="width:204px;height:128px"&gt;&lt;/pre&gt;';                   
  
                  $('#results').append('&lt;pre&gt;' + vidTitle + vidThumbimg +  '&lt;/pre&gt;');                      
          })  
      })  
  }
    &lt;/script&gt; 
    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"&gt;  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>