2022年如何将YouTube频道嵌入网站？已试旧方案无效

之前的旧方案失效主要是因为YouTube更新了嵌入规则和API版本，以下是当前有效的两种实现方式：

一、快速嵌入：官方iframe组件（无需API） #

这是最简单的官方支持方式，直接用iframe加载频道的上传视频列表：

1. 获取你的YouTube频道ID：频道页面URL若为https://www.youtube.com/channel/UCxxxxxx，UC开头的字符串就是频道ID；也可在频道页面右键查看源代码，搜索channelId获取。
2. 构造iframe代码，将[你的频道ID]替换为实际ID：

<iframe 
  width="800" 
  height="600" 
  src="https://www.youtube.com/embed/videoseries?list=UU[你的频道ID]" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen
></iframe>

• 注：频道的默认上传列表ID是UU+原频道ID（原ID为UC开头），上述链接已自动对应这个规则。
• 如果频道有自定义URL（如@YourChannelName），也可尝试用src="https://www.youtube.com/embed/videoseries?list=PL[自定义频道对应的列表ID]"，但优先推荐用频道ID的方式更稳定。

二、自定义展示：YouTube Data API v3（适合个性化需求） #

如果需要自定义视频排版、添加额外功能（比如筛选、搜索），可以用官方API获取视频数据后自行渲染：

1. 前往Google Cloud Console创建项目，启用YouTube Data API v3，生成API密钥。
2. 调用playlistItems.list接口获取频道的上传视频列表（上传列表ID规则同上：UU+频道ID）。
3. 前端渲染示例：

<!-- 页面容器 -->
<div id="youtube-channel-container" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px;"></div>

<script>
const API_KEY = '你的API密钥';
const CHANNEL_ID = '你的频道ID';
const UPLOADS_PLAYLIST_ID = 'UU' + CHANNEL_ID.slice(2);

// 获取视频列表
fetch(`https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=${UPLOADS_PLAYLIST_ID}&maxResults=20&key=${API_KEY}`)
  .then(res => res.json())
  .then(data => {
    const container = document.getElementById('youtube-channel-container');
    data.items.forEach(item => {
      const videoId = item.snippet.resourceId.videoId;
      const card = document.createElement('div');
      card.innerHTML = `
        <iframe 
          width="100%" 
          height="180" 
          src="https://www.youtube.com/embed/${videoId}" 
          frameborder="0" 
          allowfullscreen
        ></iframe>
        <h4 style="margin: 8px 0;">${item.snippet.title}</h4>
        <p style="font-size: 14px; color: #666;">${item.snippet.publishedAt.slice(0, 10)}</p>
      `;
      container.appendChild(card);
    });
  })
  .catch(err => console.error('加载视频失败:', err));
</script>

• 注意事项：API有免费配额限制（每日10000单位调用量），足够小型网站使用；若需加载更多视频，可通过pageToken参数实现分页。

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