React - Adding a Video Player to play Youtube videos in your project

Marcelo Matos — Wed, 03 Jun 2020 18:29:21 +0000

In this short article, I'm bringing something simple to implement and, in some cases, can add a lot of value to projects. I decided to use this feature on my personal website ( www.marcelomatos.ca ), as a way to show the recent projects I've been working on. It is important to note that this solution isn't restricted to Youtube.

The component I chose was the ReactPlayer.

Step 1 - Install react-player component

yarn add react-player

npm install react-player --save

Step 2 - Import the component

import ReactPlayer from 'react-player'

Step 3 - Implement the component (and check if it is working 😉)

<ReactPlayer
    url="https://youtu.be/luai0p0y2zE"
/>

Step 4 - Add optional properties

<ReactPlayer
    url="https://youtu.be/luai0p0y2zE"
    controls
    playbackRate = {2}
    width = "896px"
    height = "504px"
/>

In the example above the following properties were implemented:
- controls = Display native player controls
- playbackRate = Set the playback rate of the player
- width = Set the width of the player
- height = Set the height of the player

The complete list of optional properties can be found in the following link:

https://www.npmjs.com/package/react-player#props

DEV Community: Marcelo Matos

React - Adding a Video Player to play Youtube videos in your project