如何在jQuery中获取Youtube视频？

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://apis.google.com/js/api.js"></script>

<div id="youtube-video" data-video-id="VIDEO_ID"></div>

$(document).ready(function() {
  var videoId = $('#youtube-video').data('video-id');
  
  // 加载YouTube Data API
  gapi.load('client', function() {
    gapi.client.init({
      apiKey: 'YOUR_API_KEY'
    }).then(function() {
      // 调用YouTube Data API来获取视频信息
      return gapi.client.request({
        'path': '/youtube/v3/videos',
        'params': {
          'part': 'snippet',
          'id': videoId
        }
      });
    }).then(function(response) {
      var videoTitle = response.result.items[0].snippet.title;
      var videoDescription = response.result.items[0].snippet.description;
      
      // 在页面上显示视频标题和描述
      $('#youtube-video').append('<h2>' + videoTitle + '</h2>');
      $('#youtube-video').append('<p>' + videoDescription + '</p>');
    }, function(error) {
      console.error('Error fetching YouTube video:', error);
    });
  });
});