How to embed Youtube videos using ReactJs

embed youtube video using reactjs

Introduction

In React it is easy to embed and play YouTube videos in your application. You can do it in two ways. One includes using the Iframe tag while the other is by embedding the YouTube URL.  Here we focus on the embed URL method.

Using React-Player Module

Getting started

Assuming you already have a React application and you want to embed YouTube videos without using the iframe tag.

You are required to install react-player (an npm module)

npm install --save react-player

OR

yarn add react-player

Let’s Embed;

The advantage of the embed approach is that you can use it further for playing other URLs including video file paths, Facebook videos, Twitch,  SoundCloud, and Vimeo among others.

Code Example

Let’s start with a component which will inject the ReactPlayer into different parts of our application. We will call it Embedvideo. It can be used anywhere. We have imported embedvideo.css which we are going to create next.

This component accepts youtube video url as props.

//embedvideo.jsx

import React from "react"
import ReactPlayer from "react-player"
import "./embedvideo.css"

const Embedvideo = (props) => {
  return (
    <div className="player-wrapper">
      <ReactPlayer
        className="react-player"
        url={props.url}
        width="100%"
        height="100%"
      />
    </div>
  )
}

export default Embedvideo

Let’s create a css file to beautify our player –

/*embedvideo.css*/

.player-wrapper {
  position: relative;
  padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
}

.react-player {
  position: absolute;
  top: 0;
  left: 0;
}

Now in our App.js file, we will use our newly created Embedvideo component. You can see that we are passing the youtube video url as the prop data in the name url.

//App.js

import React from "react";
import Embedvideo from "./embedvideo";

export default function App() {
  return (
    <div className="App">
      <h1>
        Hello Youtube
      </h1>

      <Embedvideo url={"https://www.youtube.com/watch?v=do78xbPwHV0"} />

    </div>
  );
}

      This is the best article to learn embedding of Youtube Videos using ReactJS ♥♥

Click here to Tweet this

Live Demo

Open Live Demo

Using IFrame tag

You may also embed a video using Iframe code provided by Youtube or any other video serving platform. In this approach we are not required to use any kind of external library. Simply add the iframe code and it will work.

Steps to get Iframe code from Youtube video

Open the video in the browser –

click on share button

Click on the share button as shown in the image. The next window will prompt different ways of sharing a video.

choose embed option from the list

Out of the different provided options, choose Embed to get Iframe code.

click copy button to get the iframe code

Youtube will show the Iframe code along with some more options. Click on Copy button.

Remember, not all videos are allowed to embed by Youtube so you might not get this option for all.

Code Example

Let’s use this Iframe code into our application. For simplicity, we are going to add it directly into App.js file.

//App.js

import React from "react";

export default function App() {
  return (
    <div className="App">
      <h1>
        Hello Youtube
      </h1>

      <iframe width="560" height="315" src="https://www.youtube.com/embed/nTeuhbP7wdE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    </div>
  );
}

Live Demo

Open Live Demo