DEV Community

Marcelo Matos
Marcelo Matos

Posted on

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

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 ( ), 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 πŸ˜‰)


Step 4 - Add optional properties

    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:

Top comments (0)