如何从YouTube频道获取最新5个视频缩略图并实现弹窗播放？

完全可以实现这个需求，下面是具体的实现步骤：

1. 通过YouTube Data API获取最新视频数据 #

首先需要使用YouTube Data API v3拉取频道的最新视频信息：

• 前往Google Cloud控制台创建项目，启用YouTube Data API v3，生成你的API密钥。
• 调用search.list接口，指定以下关键参数：
  • channelId：你的YouTube频道ID（可在频道设置中找到）
  • maxResults：5（获取最新的5个视频）
  • order：date（按发布时间倒序排列）
  • part：snippet（返回包含缩略图、视频ID、标题等核心信息）
  • type：video（只返回视频内容，排除直播、播放列表等）

示例JavaScript请求代码：

const API_KEY = '你的API密钥';
const CHANNEL_ID = '你的频道ID';

fetch(`https://www.googleapis.com/youtube/v3/search?key=${API_KEY}&channelId=${CHANNEL_ID}&maxResults=5&order=date&part=snippet&type=video`)
  .then(res => res.json())
  .then(data => {
    renderVideoThumbnails(data.items);
  })
  .catch(err => console.error('获取视频数据失败:', err));

注意：API有免费调用配额，个人网站的日常使用完全足够。

2. 前端渲染视频缩略图 #

先在HTML中准备一个容器，然后编写渲染函数生成缩略图元素：

<div id="youtube-thumbnails-container"></div>

function renderVideoThumbnails(videos) {
  const container = document.getElementById('youtube-thumbnails-container');
  
  videos.forEach(video => {
    const videoId = video.id.videoId;
    // 选择合适的缩略图尺寸：default(120x90)、medium(320x180)、high(480x360)
    const thumbnailUrl = video.snippet.thumbnails.medium.url;
    const videoTitle = video.snippet.title;

    const thumbnailWrapper = document.createElement('div');
    thumbnailWrapper.className = 'youtube-thumbnail';
    thumbnailWrapper.innerHTML = `
      <img src="${thumbnailUrl}" alt="${videoTitle}" data-video-id="${videoId}">
      <span>${videoTitle}</span>
    `;
    
    // 绑定点击事件触发弹窗播放
    thumbnailWrapper.addEventListener('click', () => openVideoModal(videoId));
    container.appendChild(thumbnailWrapper);
  });
}

添加基础CSS美化样式：

.youtube-thumbnail {
  display: inline-block;
  margin: 10px;
  cursor: pointer;
  text-align: center;
}
.youtube-thumbnail img {
  width: 320px;
  height: 180px;
  object-fit: cover;
  border-radius: 6px;
  transition: opacity 0.2s;
}
.youtube-thumbnail:hover img {
  opacity: 0.9;
}
.youtube-thumbnail span {
  display: block;
  width: 320px;
  margin-top: 6px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

3. 实现弹窗播放功能 #

创建弹窗的HTML结构（默认隐藏）：

<div id="video-modal" class="modal">
  <div class="modal-inner">
    <button class="modal-close">&times;</button>
    <div id="video-player"></div>
  </div>
</div>

弹窗的CSS样式：

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
}
.modal-inner {
  position: relative;
  margin: 6% auto;
  width: 80%;
  max-width: 900px;
}
.modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  background: transparent;
  border: none;
  cursor: pointer;
}
#video-player iframe {
  width: 100%;
  height: 500px;
  border: none;
  border-radius: 8px;
}

编写弹窗的JavaScript逻辑：

function openVideoModal(videoId) {
  const modal = document.getElementById('video-modal');
  const playerContainer = document.getElementById('video-player');
  
  // 嵌入YouTube播放器，autoplay=1实现点击后自动播放
  playerContainer.innerHTML = `<iframe src="https://www.youtube.com/embed/${videoId}?autoplay=1" allow="autoplay; encrypted-media; fullscreen"></iframe>`;
  modal.style.display = 'block';
}

// 关闭弹窗并清空播放器
function closeVideoModal() {
  const modal = document.getElementById('video-modal');
  const playerContainer = document.getElementById('video-player');
  
  modal.style.display = 'none';
  playerContainer.innerHTML = ''; // 清空iframe，停止视频播放
}

// 绑定关闭事件
document.querySelector('.modal-close').addEventListener('click', closeVideoModal);
window.addEventListener('click', (e) => {
  if (e.target === document.getElementById('video-modal')) {
    closeVideoModal();
  }
});

内容的提问来源于stack exchange，提问作者Rahman Faruq Rajabiyansyahr