React+TypeScript嵌入YouTube频道出现404错误求助

你的YouTube播放器显示404有两个核心问题：

1. iframe的src属性写法错误 #

代码里src="{embedUrl}"是错误写法——React中绑定变量到属性时，直接写src={embedUrl}即可，不需要额外加双引号。加双引号会把{embedUrl}当作普通字符串传递，导致iframe请求的是字面量地址而非你拼接的正确URL。

2. YouTube嵌入URL格式不匹配 #

listType=user_uploads对应的list参数需要传入YouTube用户名，而非channel ID。如果要通过channel ID嵌入频道的上传列表，有两种可靠方式：

方式一：使用频道对应的上传Playlist ID #

每个YouTube频道的上传列表都有固定的Playlist ID，规则是将channel ID开头的UC替换为UU。比如你的channel ID是UCm9C6bqd05CQOVdOSC6fV2g，对应的上传Playlist ID就是UUm9C6bqd05CQOVdOSC6fV2g，嵌入URL格式为：

https://www.youtube.com/embed/videoseries?list=${playlistID}

方式二：直接指定channel参数 #

使用channel参数直接传入channel ID，URL格式为：

https://www.youtube.com/embed/?channel=${channelID}

修正后的代码 #

以下是修复后的完整代码：

import React from 'react';

interface YouTubePlayerProps {
  channelID: string;
}
 
const YouTubePlayer: React.FC<YouTubePlayerProps> = ({ channelID }) => {
  // 方式一：使用转换后的上传Playlist ID
  const playlistID = channelID.replace('UC', 'UU');
  const embedUrl = `https://www.youtube.com/embed/videoseries?list=${playlistID}`;

  // 或者用方式二：直接用channel参数
  // const embedUrl = `https://www.youtube.com/embed/?channel=${channelID}`;

  return (
    <div>
      <iframe
        id="ytplayer" 
        width="640" height="360"
        src={embedUrl}
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
      ></iframe>
    </div>
  );
};

const MyComponent = () => {
  const channelID = 'UCm9C6bqd05CQOVdOSC6fV2g';
  
  return (
    <div>
      <h1>Welcome to My YouTube Channel</h1>
      <YouTubePlayer channelID={channelID} />
    </div>
  );
};

export default MyComponent;

额外建议：给iframe添加frameBorder="0"和必要的allow属性，可提升兼容性和播放体验。

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