How to add Video Player in Next.js ?

Adding a video player in a Next.js application enhances the user experience by enabling video playback. The react-player library simplifies integrating various video sources such as YouTube, Vimeo, and local files. In this article, we are going to learn how we can add Video Player in NextJS. 

Approach

To add a Video Player in Next.js, we will use the react-player package. This package allows us to easily embed a video player anywhere in our app. First, install the react-player package using npm install react-player. Then, import and use the ReactPlayer component on your homepage to add a video player.

Steps to Create NextJS App

Step 1: Initialize a new Next.js project using the below command:

npx create-next-app gfg

Step 2: Install the required package:

Now we will install the react-player package using the below command:

npm i react-player

Project Structure: It will look like this.

The updated dependencies in the package.json file are:

"dependencies": {
    "next": "14.2.4",
    "react": "^18",
    "react-dom": "^18",
    "react-player": "^2.16.0",
}

Example: This example demonstrates add a video player in the next.js application with the help of react-play npm package.

// Filename - index.js

import React from 'react'
import ReactPlayer from 'react-player'

export default function VideoPlayer(){
  return (
    <div>
      <h2>NextJs VideoPlayer - GeeksforGeeks</h2>
      <ReactPlayer url='https://www.youtube.com/watch?v=wWgIAphfn2U' />
    </div>
  )
}

Explanation: In the above example first, we are importing our ReactPlayer component from the installed package. After that, we are using the ReactPlayer component inside a new function. We can enter the link of the video that we want to play.

Steps to run the application: Run the below command in the terminal to run the app.

npm run dev

Output: