How to create a responsive video player in React
Published: 2021-02-17 20:38:33

---
slug: how-to-create-a-video-player-in-react
title: How to create a responsive video player in React
author: Beingana Jim Junior
author_title: Front end Devoloper
author_url: https://github.com/jim-junior
published: true
description: How to create a responsive video player in React
keywords:
    - responsive video player
    - react video
    - react video player
    - react audio player
    - Beingana Jim Junior
cover_image: https://cranom.com/img/reactjs-media.png
---

Most famous websites usually have there own custom video players such as Youtube, Facebook etc. So some times you as a web developer you want to embed a video in your website but find it hard to create one with an amazing UI. Today I will show you how to have an amazing Video and Audio player in React.
<!--truncate-->

Since the default HTML5 video player usually looks different in different browsers you definetely want to avoid using it and you definetely dont want to create one from scratch so the best idea is to use a package.

We shall be using ReactJS Media library for this tutorial. The reason is because it has a great documentation and its HTML5 player has a great UI compared to other famous libraries like react player. So enough of the words, lets start

## Installation

You can install it with any of your favourite package manager here we shall demostrate `npm` and `yarn` so go to your terminal and type the following command.

### `npm`
```bash
npm install reactjs-media
```
### `yarn`
```bash
yarn add reactjs-media
```
Now that you have installed it your can now use it.

## Components

To use it you will have to import the the component you want from `reactjs-media`. The list of components are:

-   `ReactVideo` for a native video player.
-   `ReactAudio` for an audio player.
-   `FacebookPlayer` for a Facebook player(For videos from facebook ).
-   `Image` for responsive and optimized images.
-   `YoutubePlayer` for a Youtube player.

> Incase the more players are added I will update this page. This is because more players are added every time.

## Usage

Now let me demonstrate how to use each of those components.

### Video Player

This is the native video player but it is enhanced and given a great UI. You have to import it from the library and pass in props. It can be used for normal video files supported by the browsers.

#### Example

```jsx
import React from "react";
import { ReactVideo } from "reactjs-media";

const App = () => {
	return (
		<div>
			<ReactVideo
				src="https://www.example.com/url_to_video.mp4"
				poster="https://www.example.com/poster.png"
				primaryColor="red"
				// other props
			/>
		</div>
	);
};

export default App;
```

This will create a player that is similar to one like this:
![ReactJs video component image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yb604qhstq5rzw9dqv53.png)
It has more `props` and they can be found in the [Official documentation](https://cranom.com/reactjs-media/api/video-props)

### Audio Player

The audio player is used for audio files and it can be used like this.

```jsx
import React from "react";
import { ReactAudio } from "reactjs-media";

const MyVideo = () => {
	return (
		<>
			<ReactAudio
				src="/audio.mp4"
				poster="/poster.png"
				//you can pass in other props
			/>
		</>
	);
};
```

Your can also import the audio player from another file in the package.

```js
import { ReactAudio } from "reactjs-media/audio";
```

## Youtube Player

Using the it is easy all you have to do is add the video url.

#### Example

```jsx
const App = () => {
	return (
		<div>
			<YoutubePlayer
				src="https://youtu.be/UZCO5k1Nu70" // Reqiured
				width={650}
				height={600}
			/>
		</div>
	);
};
```

it also hase other props so check them out in the [documentation](https://cranom.com/reactjs-media/api/youtube-player-props).

## Facebook Player

This is used to play videos from facebook. All you have to do is copy the facebook video URL and paste it as the `src` prop in the component. The player will automatically load the facebook sdk into the `body` section of your app and then play the video. To learn more about it visit the [documentaion](https://cranom.com/reactjs-media/components/facebook-player "Official Documentaion")

#### Example

```jsx
import React from "react";
import { FacebookPlayer } from "reactjs-media";

const MyVideo = () => {
	return (
		<>
			<FacebookPlayer
				src="https://www.facebook.com/facebook/videos/10153231379946729/"
				width={650}
				height={600}
			/>
		</>
	);
};
```


## Conclusion

To me I think this is the best package out there that you can use if you want to create a video player although their might be others that are better that it but as I know when it comes to a native video player this is the best I have seen since it also includes an audio player component. You can find it's source code on [Github](https://github.com/jim-junior/reactjs-media "Github Repository")