如何嵌入YouTube播放列表中的随机视频且不加载完整播放列表

要实现从播放列表随机嵌入单个视频且不加载整个播放列表，核心思路是先获取播放列表的所有视频ID，随机选一个后直接嵌入该单视频的iframe，而非使用播放列表类型的嵌入链接。

实现步骤与代码片段 #

1. 获取播放列表视频ID并随机选择
   先用YouTube Data API的PlaylistItems.list接口拉取目标播放列表的所有视频ID（请自行替换API密钥和播放列表ID）：

   // 替换为你的YouTube Data API密钥和目标播放列表ID
   const API_KEY = 'YOUR_API_KEY';
   const PLAYLIST_ID = 'YOUR_PLAYLIST_ID';
   let videoIds = [];
   
   // 获取播放列表所有视频ID
   async function fetchPlaylistVideos() {
     let nextPageToken = '';
     do {
       const response = await fetch(`https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&playlistId=${PLAYLIST_ID}&maxResults=50&pageToken=${nextPageToken}&key=${API_KEY}`);
       const data = await response.json();
       videoIds = videoIds.concat(data.items.map(item => item.contentDetails.videoId));
       nextPageToken = data.nextPageToken;
     } while (nextPageToken);
   
     // 随机选择一个视频ID
     const randomVideoId = videoIds[Math.floor(Math.random() * videoIds.length)];
     embedRandomVideo(randomVideoId);
   }
   
   // 嵌入随机视频
   function embedRandomVideo(videoId) {
     const iframe = document.createElement('iframe');
     iframe.width = '560';
     iframe.height = '315';
     iframe.loading = 'lazy';
     iframe.src = `https://www.youtube.com/embed/${videoId}?rel=0`;
     iframe.frameBorder = '0';
     iframe.allowFullscreen = true;
     // 将iframe插入到页面指定容器中（替换为你的容器ID）
     document.getElementById('video-container').appendChild(iframe);
   }
   
   // 页面加载时执行
   window.onload = fetchPlaylistVideos;
   

2. 页面HTML结构
   在页面中添加用于放置视频的容器：

   <div id="video-container"></div>
   

关键说明 #

• 直接使用单个视频ID的嵌入链接（https://www.youtube.com/embed/{videoId}），播放器不会关联原播放列表，右上角也就不会显示播放列表入口。
• 若不想依赖YouTube Data API，也可以手动收集播放列表的所有视频ID，存入数组后随机选择，这样就不需要API密钥：

  // 手动维护播放列表视频ID数组
  const videoIds = ['VIDEO_ID_1', 'VIDEO_ID_2', 'VIDEO_ID_3', ...];
  const randomVideoId = videoIds[Math.floor(Math.random() * videoIds.length)];
  // 后续嵌入逻辑同上
  

内容的提问来源于stack exchange，提问作者Easy Busy