Create React Video Player (Part 1): Beginners’ Guide

Table of Contents

Introduction

Are you wondering how to implement react video player in your application? Do you have a client requirement or want to learn just for yourself? In either case, we are here to help you.

Our team is back with a tutorial for beginners: How to create react video player (part 1). You know the drill, follow the step-by-step instructions till the end and implement with us or clone the source code from the last section. Choose whatever’s best for you and start coding, my friend!

Let’s discuss the goals and prerequisites of the tutorial.

Tutorial Goal & Prerequisites: React Video Player

Tutorial Goals

• Basic project set up and installation
• Simple demo application with react video player
• Source code

The video player application is capable of playing videos on this platform:

• Youtube
• Facebook
• Vimeo
• Dailymotion
• Soundcloud
• Wistia
• Twitcoh
• Mixcloud

Prerequisites

• Basic knowledge of ReactJS
• Familiarity with installation dependencies
• Familiarity with styling the component and its responsiveness

Save up to 40% on Development, Maintenance, and Support Cost
Contact Us and hire Reactjs developers to Upscale Your Product Development Capabilities

Creating a New ReactJS Project

Use the below command to create a new reactJS project.

yarn create react-app react-video-player

Run Application

Use the below command to run the application, just to check whether we have create the project successfully or not.

cd react-video-player
yarn start

Once we execute the above command our application will run successfully. Here’s the default screen you will see.

Code Cleaning

To implement our main functionality using react video player we will open App.js file and remove unnecessary code.

// App.js

function App() {
  return (
    <div className="App">

    </div>
    
    );
}
export default App;

Install react-player

Now for creating a react video player we will at first install react-player package. Use the below command for the same.

yarn add react-player

Let’s Code

Import react-player package in App.js.

import ReactPlayer from 'react-player'

After importing react-player we will make changes in JSX code and for that purpose we will write these lines of code. Your App.js file will look something like this once you are done with adding your code.

// App.js

import ReactPlayer from 'react-player'

function App() {
  return (
    <div className="App">
     <ReactPlayer url='https://www.youtube.com/watch?v=BQwj6A99oVc' />
    </div>
    );
}
export default App;

Now our demo application will look as shown below.

React Video Player Demo App: Set Responsiveness

Once done with the basic implementation of react video player, we will now code for the application’s responsiveness. For making application responsive we will remove JSX code and then add new lines of code.

 <div className="player-wrapper">
      <ReactPlayer
        className='react-player'
        url='https://www.youtube.com/watch?v=BQwj6A99oVc'
        width='100%'
        height='100%'
      />
 </div>

And also import the App.css file. So now our App.js will look like this.

import ReactPlayer from 'react-player';
import './App.css';
function App() {
  return (
    <div className="player-wrapper">
      <ReactPlayer
        className='react-player'
        url='https://www.youtube.com/watch?v=BQwj6A99oVc'
        width='100%'
        height='100%'
      />
    </div>
  );
}
export default App;

Open App.css file and clean up previous code. Add these css styles to make application responsive.

.player-wrapper {
  position: relative;
  padding-top: 56.25% /* Player ratio: 100 / (1280 / 720) */
}

.react-player {
  position: absolute;
  top: 0;
  left: 0;
}

Voila! done with the responsiveness of our react video player demo app! You can see outcome as shown below.

Github Repository: react-video-player-demo

This way we have successfully implemented video player application in React.js. Feel free to clone the github repository: react-video-player-demo and start exploring more.

Quick Read:

React Static Site Generators

Conclusion