如何使用原生JavaScript通过YouTube视频ID获取视频标题

你现有的缩略图拉取逻辑可以直接复用，要额外获取视频标题可以调用YouTube官方公开的oEmbed接口，不需要申请开发者密钥，前端直接请求即可，接口会返回包含标题在内的视频公开元数据。

完整实现代码 #

JavaScript代码 #

(function playYouTube() {
  let YouTubeContainers = document.querySelectorAll(".embed-youtube");
  for (let i = 0; i < YouTubeContainers.length; i++) {
    let container = YouTubeContainers[i];
    let videoId = container.dataset.videoId;

    // 原有缩略图拉取逻辑
    let imageSource = `https://img.youtube.com/vi/${videoId}/sddefault.jpg`;
    let image = new Image();
    image.src = imageSource;
    
    // 新增标题拉取逻辑
    fetch(`https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${videoId}&format=json`)
      .then(res => res.json())
      .then(data => {
        // 生成标题元素，可自行修改标签类型和样式
        let titleEl = document.createElement('p');
        titleEl.className = 'youtube-title';
        titleEl.textContent = data.title;
        container.appendChild(titleEl);
        // 缩略图加载完成后插入容器
        image.addEventListener("load", function () {
          container.appendChild(image);
        });
      })
      .catch(err => {
        // 请求失败降级：仅显示缩略图
        console.error('标题拉取失败', err);
        image.addEventListener("load", function () {
          container.appendChild(image);
        });
      });
  }
})();

原有HTML无需修改，可补充可选CSS自定义标题样式 #

.youtube-title {
  font-size: 16px;
  font-weight: 500;
  margin: 10px 0;
  color: #222;
  line-height: 1.4;
}

注意事项 #

• oEmbed接口返回的是YouTube平台的原始公开标题，和视频页面展示的标题完全一致
• 该接口原生支持跨域请求，前端直接调用不需要额外配置代理服务
• 如果需要获取更多元数据（比如时长、频道名称、封面尺寸），可以直接从oEmbed返回的结构体中提取对应字段

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