> ## Documentation Index
> This page is part of the Image and Video APIs product. Fetch the complete documentation index for Image and Video APIs at: https://cloudinary.com/documentation/llms-image-and-video-apis.txt?referrer=docpage and then use it to discover all relevant pages before exploring further.
> If your task extends beyond this product, fetch the top-level index covering all Cloudinary products and topics at: https://cloudinary.com/documentation/llms.txt?referrer=docpage
# 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.
{videoTranscript:publicId=training/Video_Player_React}
> **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}| |
| --- | --- |
| | 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}| |
| --- | --- |
| | 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}| |
| --- | --- |
| | 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}| |
| --- | --- |
| | 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}| |
| --- | --- |
| | In the `