獲取YouTube視頻ID的點擊與YouTube數據API縮略圖時

Question

DEMO：http://codepen.io/mistkaes/pen/6b6a347c7d24edee15b3491420db4ecd?editors=011

所以，我有這個演示具有基本的搜索功能工作......但我想要做的是當用戶點擊視頻的縮略圖，它會返回videoId（例如：[] youtube.com/?watch= BFjgsvM2gZ0]之後的代碼。

我不想用任何標籤來實現這一點，只是純粹的jQuery的方式！

的jQuery：

 var apikey = 'AIzaSyDYwPzLevXauI-kTSVXTLroLyHEONuF9Rw'; 

     $(function() { 
      var searchField = $('#search-input'); 

      $('#search-form').submit(function(e) { 
       e.preventDefault(); 
      }); 
     }); 

     function search() { 
      $('#results').html(''); 

      q = $('#search-input').val(); 

      $.get(
       "https://www.googleapis.com/youtube/v3/search", { 
        part: 'snippet, id', 
        q: q, 
        maxResults: 50, 
        type: 'video', 
        key: apikey 
       }, 
       function(data) { 
        $.each(data.items, function(i, item) { 
         var output = getResults(item); 

         $('#results').append(output); 
        }); 
       }); 
     } 

     function getResults(item) { 
      var videoID = item.id.videoId; 


     var title = item.snippet.title; 
     var thumb = item.snippet.thumbnails.high.url; 
     var channelTitle = item.snippet.channelTitle; 

     var output = '<li>' + 
      '<div class="list-left">' + 
      '<img src="' + thumb + '">' + 
      '</div>' + 
      '<div class="list-right">' + 
      '<h3>' + title + '</h3>' + 
      '<p class="cTitle">' + channelTitle + '</p>' + 
      '</div>' + 
      '</li>' + 
      '<div class="clearfix"></div>' + 
      ''; 

     return output; 

} 

一如既往感謝幫助我！

Answer 1

如果你需要獲得一個視頻ID，您可以在getResults添加新的變量：

var videoID = item.id.videoId; 

，再將其粘貼在你的輸出。

樣品1：警報視頻ID：http://jsfiddle.net/DmitriyBorisov/jf8402qk/

示例2：打開YouTube的視頻在空白窗口：http://jsfiddle.net/DmitriyBorisov/jf8402qk/1/