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:
Top comments (0)