Thursday, September 18, 2025
HomeLanguagesHow to add Video Player in Next.js ?

How to add Video Player in Next.js ?

In this article, we are going to learn how we can add Video Player in NextJs. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac. 

Approach: To add our Video Player we are going to use the react-player package. The react-player package helps us to add a video player anywhere in our app. So first, we will install the react-player package and then we will add a video player on our homepage.

Create NextJS Application: You can create a new NextJs project using the below command:

npx create-next-app gfg

 

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.

Adding the Video Player: After installing the package we can easily add Video Player to our app. For this example, we are going to add a video player to our homepage.

index.js




import React from 'react'
import ReactPlayer from 'react-player'
  
export default function VideoPlayer(){
  return (
    <div>
      <h2>NextJs VideoPlayer - neveropen</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:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
Dominic
Dominichttp://wardslaus.com
infosec,malicious & dos attacks generator, boot rom exploit philanthropist , wild hacker , game developer,
RELATED ARTICLES

Most Popular

Dominic
32299 POSTS0 COMMENTS
Milvus
84 POSTS0 COMMENTS
Nango Kala
6664 POSTS0 COMMENTS
Nicole Veronica
11837 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11895 POSTS0 COMMENTS
Shaida Kate Naidoo
6779 POSTS0 COMMENTS
Ted Musemwa
7054 POSTS0 COMMENTS
Thapelo Manthata
6738 POSTS0 COMMENTS
Umr Jansen
6744 POSTS0 COMMENTS