如何在 Next.js 中添加 Youtube 视频？

在本文中，我们将学习如何在 NextJs 中添加 Youtube 视频。 NextJS 是一个基于 React 的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。动态路径的链接有助于有条件地渲染 NextJS 组件。

方法：要添加我们的 Youtube 视频，我们将使用 react-youtube 包。 react-youtube 包帮助我们在应用程序的任何位置添加 Youtube 视频。所以首先，我们将安装 react-youtube 包，然后我们将在我们的主页上添加一个 youtube 视频。

创建 NextJS 应用程序：您可以使用以下命令创建一个新的 NextJs 项目：

npx create-next-app gfg

安装所需的包：现在我们将使用以下命令安装 react-youtube 包：

npm i react-youtube

项目结构：它看起来像这样。

添加 Youtube 视频：安装 react-youtube 包后，我们可以轻松地将 Youtube 视频添加到我们的应用程序中。对于这个例子，我们将在我们的主页上添加一个文本荧光笔。

在index.js文件中添加以下内容：

Javascript

import React from "react";
import YouTube from "react-youtube";
  
export default class YoutubeVideo 
extends React.Component {
  render() {
    const opts = {
      height: "390",
      width: "640",
      playerVars: {
        autoplay: 1,
      },
    };
  
    return (
      
        GeeksforGeeks - Youtube
        
      
    );
  }
  
  _onReady(event) {
    event.target.pauseVideo();
  }
}

说明：在上面的例子中，我们首先从安装的包中导入 Youtube 组件。之后，我们将创建一个新的常量变量来存储视频播放器的设置。然后我们将我们的 videoId 和选项添加到我们的 Youtube 组件中。您可以在 youtube 视频链接中找到 videoId。

运行应用程序的步骤：在终端中运行以下命令来运行应用程序。

npm run dev

如何在 Next.js 中添加 Youtube 视频？

Javascript

GeeksforGeeks - Youtube

输出：