loading...

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

marcelomatosdev profile image Marcelo Matos ・1 min read

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

or

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

Discussion

markdown guide