React页面嵌入YouTube视频的最优实现方法是什么？

你遇到的报错是由于react.video包已经停止维护多年，包结构与官方文档完全不匹配，找不到对应入口文件导致的，直接放弃该包即可。目前主流实现方式有以下两种：

./node_modules/react.video/index.js
Error: ENOENT: no such file or directory, open '/home/tvojakeva/Desktop/stack/test/node_modules/react.video/index.js'

方案1：原生iframe实现（无第三方依赖，最稳定） #

不需要安装任何额外依赖，直接使用YouTube官方提供的iframe嵌入规则即可，兼容性最好、性能损耗最低，适合仅基础展示需求的场景：

import React from 'react';

// 封装通用嵌入组件
const YouTubeEmbed = ({ videoId, width = '560', height = '315' }) => {
  return (
    <iframe
      width={width}
      height={height}
      src={`https://www.youtube.com/embed/${videoId}`}
      title="YouTube视频播放器"
      frameBorder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowFullScreen
    />
  );
};

export default YouTubeEmbed;

使用时只需传入对应YouTube视频的ID即可，例如视频链接为https://www.youtube.com/watch?v=abc123，则videoId参数值为abc123。

方案2：第三方组件实现（功能更丰富） #

如果需要实现自动播放控制、监听播放进度、自定义播放器交互等进阶需求，可以使用社区长期维护的成熟React YouTube组件，避免自行封装的兼容问题：

1. 安装依赖：

npm install react-youtube
# 或使用yarn
yarn add react-youtube

2. 组件使用示例：

import React from 'react';
import YouTube from 'react-youtube';

const CustomYouTubePlayer = () => {
  // 播放器配置项
  const playerOpts = {
    height: '390',
    width: '640',
    playerVars: {
      autoplay: 0, // 0为关闭自动播放，1为开启
    },
  };

  // 播放器加载完成回调
  const handlePlayerReady = (event) => {
    // 可通过event.target调用播放器原生API，例如触发播放：event.target.playVideo()
  };

  return <YouTube videoId="abc123" opts={playerOpts} onReady={handlePlayerReady} />;
};

export default CustomYouTubePlayer;

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