Чтобы встроить видео YouTube в приложение React, вы можете использовать библиотеку «lite-youtube-embed». Эта библиотека представляет собой легкое и настраиваемое решение для встраивания видео YouTube.

Вот несколько способов встроить видео YouTube с помощью «lite-youtube-embed» в React:

Метод 1: использование компонента React

1. Установите библиотеку «lite-youtube-embed» с помощью npm или Yarn:

   npm install lite-youtube-embed

   или

   yarn add lite-youtube-embed

2. Импортируйте необходимые компоненты и стили в свой компонент React:

   import React from 'react';
   import { LiteYouTubeEmbed } from 'lite-youtube-embed';
   import 'lite-youtube-embed/src/lite-yt-embed.css';

3. Используйте компонент LiteYouTubeEmbedв своем JSX-коде:

   const MyComponent = () => {
   return (
   <div>
     <h1>My YouTube Video</h1>
     <LiteYouTubeEmbed id="VIDEO_ID" />
   </div>
   );
   };

   Замените «VIDEO_ID» фактическим идентификатором видео YouTube.

Метод 2. Использование специального перехватчика

1. Установите библиотеку «lite-youtube-embed», как указано в методе 1.

2. Создайте собственный хук для встраивания видео YouTube:

   import { useEffect } from 'react';
   import { LiteYouTubeEmbed } from 'lite-youtube-embed';
   import 'lite-youtube-embed/src/lite-yt-embed.css';
   const useYouTubeEmbed = (videoId) => {
   useEffect(() => {
   LiteYouTubeEmbed.autoLoadWidget();
   return LiteYouTubeEmbed.removeObserver;
   }, []);
   return <LiteYouTubeEmbed id={videoId} />;
   };
   export default useYouTubeEmbed;

3. Используйте специальный крючок в своем компоненте React:

   import React from 'react';
   import useYouTubeEmbed from './useYouTubeEmbed';
   const MyComponent = () => {
   const videoId = 'VIDEO_ID';
   const embed = useYouTubeEmbed(videoId);
   return (
   <div>
     <h1>My YouTube Video</h1>
     {embed}
   </div>
   );
   };

   Еще раз замените «VIDEO_ID» фактическим идентификатором видео YouTube.