How to embed the video player

This section walks you through the steps of embedding a basic video player, setting it to run a video from your Media Library, and applying commonly used video player methods and properties.

Embed a basic video player

1. Embed the video player by adding a video tag element with the video player class

Create a video tag with at least the cld-video-player class and an id value. You can also include standard HTML5 video player attributes.


2. Instantiate a Cloudinary instance with your cloudinary configuration

To use the Cloudinary Video Player library you have to configure at least your cloud_name. You can additionally define a number of optional configuration parameters if relevant.

You set configuration parameters while instantiating a new Cloudinary class, for example:

var cld ={ cloud_name: "my-cloud", secure: true});

3. Instantiate the Cloudinary video player

Instantiate the video player by using the videoPlayer method and either passing the ID of the video tag ID you defined in step 1, or passing the video element itself.

var demoplayer = cld.videoPlayer('demo-player')


var vidElem = document.querySelector("video#demo-player")
var vplayer = cld.videoPlayer(vidElem)

If you plan to include multiple players on your page with the same configuration, you can use the videoPlayers method. For example, you can specify different video public IDs for each <video> tag. In this case, there is no need to define id attributes for the <video> tags.

var players = cld.videoPlayers('.cld-video-player', 
 {<...configurations here...>}

4. Specify the video to play and optional player configurations

You can specify the video to play, the transformations to apply, as well as a number of additional configurations either as attributes of the <video> tag or as constructor parameters of the videoPlayer method. These configurations and transformations apply to the video player itself, and thus will apply to all video sources played inside it.

You can additionally specify some options like the video public ID, video transformations, source type, and the poster source per video source, using videoPlayer.source (or data-cld-source attribute in the <video> tag), and then set different values for these options for each video source you play.

For the <video> tag, all special Cloudinary video player configurations have a data-cld- prefix. Standard HTML5 video attributes are specified as usual.

For more details, see Customize your video player and the Video Player API Reference.

Apply common video player operations

Once you have embedded a video player in your page or app, you can take advantage of the various video player methods and properties to retrieve the current status of elements and perform a wide variety of actions on the player. For example, you can retrieve or change the video source that is playing, jump to a specific place in the video, activate video control operations like play, pause, stop, play next or previous, mute/unmute, adjust volume, maximize, and more.

Here are a few simple examples:

  • Set the player volume:

  • Mute the player:

  • Jump to the middle of a video:


All video player methods and properties

For details on all available operations, see the video player methods and playlist operations in the Video Player API Reference.

To view the code for a video player with a set of custom control buttons based on the video player methods, see api.html in the sample CodePen.