在React项目中添加YouTube播放列表的技术问题

你直接把播放列表ID传给videoId肯定不行，这个参数只能接受单个视频ID，要加载播放列表得靠YouTube播放器的内置参数配置。

修改你的代码如下：

import YouTube from 'react-youtube';

const configVideo = {
  height: '120',
  width: '220',
  playerVars: {
    autoplay: 0,
    list: "PLt2Yy5r4odxHh8fuxSHMHLDFamcR090Q2", // 填入你的播放列表ID
    listType: "playlist" // 明确指定列表类型为播放列表
  },
}

<div className='programs-row'>
  {/* videoId可留空，播放器会自动加载播放列表第一个视频；也可指定播放列表内某视频ID作为初始播放项 */}
  <YouTube videoId="" opts={configVideo} />
</div>

关键点说明： #

• videoId是单个视频的唯一标识，不能用来传播放列表ID
• 通过playerVars里的list和listType参数，告诉YouTube播放器加载指定的播放列表
• 如果需要自定义播放列表的行为（比如循环播放、隐藏控制栏等），可以在playerVars里添加更多YouTube播放器参数，比如loop: 1、controls: 0之类的

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