How to embed Youtube videos using ReactJs

Total
0
Shares
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;

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

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

Click here to Tweet this

Live Demo

If live demo fails to load properly on the website then please use the below button to open it in separate tab.

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

If live demo fails to load properly on the website then please use the below button to open it in separate tab.

Open Live Demo

Sign Up for Our Newsletters

Get only the best articles delivered to your mail

You May Also Like

React convert JSON to CSV

React convert JSON to CSV using JSONToCSVConvertor function. Suppose you have a table (GUI react table tool) and you want to export it into excel, then this function will come…
View Post