> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.
# Video Player in React (video tutorial)
[githublink]: https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/react-video-player
## Overview
This video tutorial teaches you how to embed the [Cloudinary Video Player](cloudinary_video_player) into your React app. Learn how to install and configure the Video Player including how to make it work with the intricacies of a React application.
## Video tutorial
This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.
> **TIP**: :title=View the code
You can find the code from this tutorial in [GitHub][githublink].
## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### Introduction to the Cloudinary Video Player
{table:class=tutorial-bullets}| |
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | The [Cloudinary Video Player](cloudinary_video_player) allows you to embed videos in your React app with just a few lines of code.
|
### Create a VideoPlayer component
{table:class=tutorial-bullets}| |
| --- | --- |
|{videotime:id=media :min=0 :sec=15 :player=cld} | Start with a basic React application and add a new file called **VideoPlayer.js** in which you can create a component for the Video Player.
|
### Embed the Video Player script
{table:class=tutorial-bullets}| |
| --- | --- |
|{videotime:id=media :min=0 :sec=29 :player=cld} | Copy the `link` tag from the [Installation and setup](cloudinary_video_player#installation) section of the docs and paste it into the `` of the **public/index.html** file. Then, copy the `script` tag and paste it into the `` of the same file.
|
### Initialize the Video Player
{table:class=tutorial-bullets}| |
| --- | --- |
|{videotime:id=media :min=1 :sec=08 :player=cld} | Use the following code in **VideoPlayer.js** to initialize the VideoPlayer. Make sure to use your own cloud name instead of `colbycloud-examples`.
|
```react
import { useEffect, useRef } from 'react';
function VideoPlayer = () {
const cloudinaryRef = useRef();
const videoRef = useRef();
useEffect(() => {
if ( cloudinaryRef.current ) return;
cloudinaryRef.current = window.cloudinary;
cloudinaryRef.current.videoPlayer(videoRef.current, {
cloud_name: 'colbycloud-examples'
})
}, []);
return (
);
}
```
### Specify the video to play
{table:class=tutorial-bullets}| |
| --- | --- |
|{videotime:id=media :min=2 :sec=56 :player=cld} | In the `