How to embed the video player

This section walks you through the steps of embedding a basic video player in your web page and setting it to run a video from your Media Library.

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.

<video
  id="demo-player"
  controls
  autoplay
  class="cld-video-player">
</video>

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 = cloudinary.Cloudinary.new({ 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')

Or

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.