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.

Copy Text
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.

Copy Text
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.

application will run successfully

Code Cleaning

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

// App.js

Copy Text
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.

Copy Text
yarn add react-player
Install react-player

Let’s Code

Import react-player package in App.js.

Copy Text
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

Copy Text
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.

Copy Text
 <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.

Copy Text
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.

Copy Text
.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.

Set Responsiveness

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.

Conclusion

Since, this was a beginners’ guide we are done with the tutorial here. We will be back with Create React Video Player (Part 2): Intermediate Guide with mode features of previous, next, pause, resume, and many more functionalities. Till then you guys try the beginners’ guide and visit ReactJS tutorials page for more such interesting and technical tutorials. We are sure you won’t regret it at all! Use your time and start coding! Don’t forget to write us your feedback and questions. We are building a community to serve tech enthusiasts and to share knowledge with the help of different tutorials, your suggestions will help us be better and do better.

Outsource Team Of Dedicated React Developers

  • Transparency
  • Flexible hiring models
  • Excellent communication skills

BOOK A 30 MIN CALL

Get In Touch

[email protected]

Your Success Is Guaranteed !

We accelerate the release of digital product and guaranteed their success

We Use Slack, Jira & GitHub for Accurate Deployment and Effective Communication.