Embed YouTube video in ReactJS

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.

Checkout more articles on ReactJS

Nested Routes in React JS
api-calls-react-hooks" title="API calls with React Hooks">API calls with React Hooks
form-validation-in-reactjs" title="Form Validation in ReactJS">Form Validation in ReactJS
scroll-to-the-top-of-the-page-after-render-in-reactjs" title="Scroll to the top of the page after render in ReactJS">Scroll to the top of the page after render in ReactJS
react-select" title="How to get selected by only value in react-select">How to get selected by only value in react-select

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.

npm i react-player

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

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

function App() {
  return (
    <div className="App">
      <h3>Embed YouTube video - <a href="https://www.cluemediator.com">Clue Mediator</a></h3>
      <ReactPlayer
        url="https://www.youtube.com/watch?v=UVCP4bKy9Iw"
      />
    </div>
  );
}

export default App;

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.

import YouTubePlayer from “react-player/lib/players/YouTube”;
...
...
<YouTubePlayer
  url='https://www.youtube.com/watch?v=d46Azg3Pm4c'
/>

4. Output

Run the project and check the output.

Output - Embed YouTube video in ReactJS - Clue Mediator

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

Demo & Source Code

Github Repository StackBlitz Project