В этой статье блога мы рассмотрим различные методы встраивания видео YouTube в приложения Next.js. Если вы хотите продемонстрировать учебное пособие, демонстрацию продукта или любой другой видеоконтент, Next.js предоставляет несколько вариантов плавной интеграции. Мы подробно рассмотрим каждый метод и предоставим примеры кода, которые помогут вам начать работу.

Метод 1. Использование кода внедрения iframe
Самый простой способ встроить видео YouTube в приложение Next.js — использовать код внедрения iframe, предоставленный YouTube. Вот пример:

import React from 'react';
const YouTubeEmbed = ({ videoId }) => (
  <iframe
    width="560"
    height="315"
    src={`https://www.youtube.com/embed/${videoId}`}
    title="YouTube video player"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowFullScreen
  />
);
export default YouTubeEmbed;

Метод 2: использование API YouTube
Next.js предлагает гибкие возможности использования API YouTube для более сложной интеграции видео. Этот метод позволяет получать видеоданные, управлять воспроизведением и получать доступ к дополнительным функциям. Вот базовая реализация:

import React, { useEffect, useState } from 'react';
const YouTubeEmbed = ({ videoId }) => {
  const [videoData, setVideoData] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(
        `https://www.googleapis.com/youtube/v3/videos?part=snippet&id=${videoId}&key=YOUR_API_KEY`
      );
      const data = await response.json();
      setVideoData(data.items[0]);
    };
    fetchData();
  }, [videoId]);
  return (
    <>
      {videoData && (
        <div>
          <h2>{videoData.snippet.title}</h2>
          <p>{videoData.snippet.description}</p>
          <iframe
            width="560"
            height="315"
            src={`https://www.youtube.com/embed/${videoId}`}
            title="YouTube video player"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
          />
        </div>
      )}
    </>
  );
};
export default YouTubeEmbed;

Метод 3. Использование сторонней библиотеки.
Next.js отлично совместим с различными сторонними библиотеками, которые упрощают встраивание видео YouTube. Одним из популярных вариантов является библиотека react-youtube. Вот пример того, как его использовать:

npm install react-youtube

import React from 'react';
import YouTube from 'react-youtube';
const YouTubeEmbed = ({ videoId }) => (
  <YouTube videoId={videoId} />
);
export default YouTubeEmbed;

В этой статье мы рассмотрели несколько методов встраивания видео YouTube в приложения Next.js. Мы рассмотрели базовый код внедрения iframe, используя API YouTube для расширенной интеграции и сторонние библиотеки, такие как react-youtube. В зависимости от ваших требований вы можете выбрать метод, который наилучшим образом соответствует вашим потребностям. Наслаждайтесь простой интеграцией видео YouTube в свои проекты Next.js!