Last updated: Mar-29-2023
On this page:
This video tutorial teaches you how to embed the 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.
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
Introduction to the Cloudinary Video Player
|0:00||The Cloudinary Video Player allows you to embed videos in your React app with just a few lines of code.|
Create a VideoPlayer component
|0:15||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
Initialize the Video Player
|1:08||Use the following code in VideoPlayer.js to initialize the VideoPlayer. Make sure to use your own cloud name instead of
Specify the video to play
Use the VideoPlayer component
|3:14||In your App.js file, import the VideoPlayer component and use the component to embed the video on the page. You can specify the width and height of the player by passing the dimensions through
You can find the code used in this video tutorial in GitHub.
- Read our Video Player guide and reference, covering every available parameter option.
- Check out some Video Player code explorers that you can fork for trying out some sample configuration changes.
- Take a look at our React SDK to learn how to transform your images and videos.
- Watch more Dev Hints videos on the Cloudinary YouTube channel.
If you like this, you might also like...
Upload Assets in ReactUpload assets using the Upload widget in a React App
Video transformationsBuild an e-commerce video showcasing products, in Node.js
Content-aware Video CroppingSmartly crop a video using content-aware AI
Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.