<< Back to examples index

Cloudinary Video Player

Multiple Players

It's easy to define players with shared configuration. For example: you can use markup to define different public ids, and use 'cld.videoPlayers' to create the players using the shared settings.

Player 1

Player 2

Player 3

Example Code:

      HTML:

      <h3>Player 1</h3>
      <div class="row">
        <center>
          <video
            muted
            data-cld-public-id="oceans"
            class="cld-video-player cld-video-player-skin-dark">
          </video>
        </center>
      </div>

      <h3>Player 2</h3>
      <div class="row">
        <center>
          <video
            muted
            data-cld-public-id="negative"
            class="cld-video-player cld-video-player-skin-light">
          </video>
        </center>
      </div>

      <h3>Player 3</h3>
      <div class="row">
        <center>
          <video
            muted
            data-cld-public-id="book"
            class="cld-video-player cld-video-player-skin-dark">
          </video>
        </center>
      </div>


      JavaScript:

      var cld = cloudinary.Cloudinary.new({ cloud_name: 'miki-cloudinary' });

      // Initialize players
      var players = cld.videoPlayers('.cld-video-player', {
        autoplay: true,
        controls: true,
        transformation: { width: 500, crop: 'limit' }
      });