How to embed Youtube videos 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

yarn add react-player

Let’s Embed;

• Create the function component <EmbedVideo/> in the Embedvideo.jsx file,  which will import react-player and takes the YouTube URL to embed on your application.

• You will then be required to import and test it in your Index.js file

• You can then rerun your application and just like magic the video appears on your default testing browser.

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>
  );
}

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 the share button as shown in the image. The next window will prompt different ways of sharing a video.

Out of the different provided options, choose Embed to get 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