Image & Video APIs

Video Player in React (video tutorial)

Last updated: Aug-20-2025

Overview

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.

Video tutorial


Video Player is loading.
Current Time 0:00
Duration -:-
Loaded: 0%
Stream Type LIVE
Remaining Time 0:00
 
1x
  • Chapters
  • descriptions off, selected
  • captions off, selected

    This video is brought to you by Cloudinary's video player - embed your own!

    View the code
    You can find the code from this tutorial in GitHub.

    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

    Jump to this spot in the video  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

    Jump to this spot in the video  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

    Jump to this spot in the video  0:29 Copy the link tag from the Installation and setup section of the docs and paste it into the <head> of the public/index.html file. Then, copy the script tag and paste it into the <body> of the same file.

    Initialize the Video Player

    Jump to this spot in the video  1:08 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 (
          <video
            ref={videoRef}
          />
      );
    }

    Specify the video to play

    Jump to this spot in the video  2:56 In the <video> element set the data-cld-public-id property to the public ID of the video you want to play.

    Use the VideoPlayer component

    Jump to this spot in the video  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 props. Control the player by specifying controls in the <video> element. Learn about all the options and features of the Video Player in the guide and reference.

    You can find the code used in this video tutorial in GitHub.

    Keep learning

    Related topics

    If you like this, you might also like...

     

    Cloudinary Academy

     

    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.

     

    ✔️ Feedback sent!