How to add youtube videos to your React app

Most of the developer have faced a situation where they need to add the youtube videos to there project usually the promotional videos to landing page. To add the youtube video to React app there is multiple ways are available. In this article we will gonna learn how to add youtube videos to your React app.

Problem

let’s assume we want to add a youtube video to our React landing page and we also have few options to do that. But most of the times we also need to customized the youtube video container like there size, autoplay option, color of progress, controls of video etc.

The iframe technique can handle most of the things but some time it’s become complex when we start adding more options.

Solution

The solution to above problem is using a package called react-youtube. What this package will gonna do it will gonna receive a video Id as prop and gonna add that video to your react app.

Installation

Like any other package we can install it using npm or yarn.

npm install react-youtube --save

Usage

It includes only two steps i.e importing the package and providing the video id.

import YouTube from 'react-youtube';

...
<YouTube videoId="UceaB4D0jpo" />;

That’s it and you will see the youtube video in your page.

after adding pacakge this will be the output

Next question will be how to get the video id and how to customize it.

If you see the URL of any video. You will gonna notice the id at the end of the url.

https://www.youtube.com/watch?v=UceaB4D0jpo

// here id UceaB4D0jpo

To add various options.

 const opts = {
      height: '390',
      width: '640',
      playerVars: {
        // https://developers.google.com/youtube/player_parameters
        autoplay: 1,
      },
    };

....
<YouTube videoId="UceaB4D0jpo" opts={opts} />;

Is not it’s super simple to use. I hope you have learned how to add youtube videos to your React app

Edit ltkmt

How to use font awesome icons in React

Categories: Reactjs

2 Comments

How to write regex in natural language - Blog React · July 17, 2020 at 3:43 am

[…] How to add youtube videos to your React app Categories: JavaScript Tags: JavaScript […]

How to add video support to React App - Blog React · August 3, 2020 at 3:41 am

[…] How to add youtube videos to your React app Categories: JavaScriptReactjs Tags: JavaScriptReactjs Advanced […]

Leave a Reply

Your email address will not be published. Required fields are marked *