Today we’ll show you how to embed YouTube video in ReactJS application. In this article, we’ll use the react-player npm package to embed the YouTube video. You can also embed video of other sites like Vimeo, Dailymotion, etc.

react youtube player, reactjs player full screen, react video thumbnail, react player responsive, React JS embed video of YouTube, SoundCloud, Facebook, Vimeo, Twitch, Streamable, Wistia, DailyMotion, Mixcloud, Files like mp4, ogv, webm, mp3, Multiple, HLS (m3u8), DASH (mpd), Create Youtube Player in ReactJs example component, Full width Youtube embed with React.js.

Steps to embed YouTube video in React

1. Create react application
2. Install npm package dependency
3. Create component to embed YouTube video
4. Output

1. Create react application

Let’s create a sample react application using the create-react-app npm package. If you don’t know how to create an application then refer to the link of Create React Application.

2. Install npm package dependency

As we mentioned, we’ll be using the react-player npm package to embed a YouTube video. So let’s get ReactPlayer installed to our application.

3. Create component to embed YouTube video

Here, we are going to update the App.js file to embed video. Your code should look like this.

App.js

There are multiple options available to play with the video player like playing, loop, controls, volume, etc.

If you are only working with single player then it’s good to import individual player to reduce the bundle size of the application.

4. Output

Run the project and check the output.

That’s it for today.
Thank you for reading. Happy Coding!

Demo & Source Code