Cloudinary Video Player

Fluid Layouts

The player supports the use of fluid layouts for dynamically adjusting the player size to it's surrounding contents.
To use this functionality, simply add the 'cld-fluid' css class to the player, or pass 'fluid: true' to the player's constructor.

Try decreasing the window size to see the fluid layout support in action.
Use the toggle button below the player toggle the 'fluid layout support' feature.

Example Code:

      HTML:

      <video
        id="example-player"
        controls
        muted
        autoplay
        class="cld-video-player cld-video-player-skin-dark cld-fluid"
        data-cld-transformation='{ "width": 500, "crop": "limit" }'>
      </video>

      <br />
      <button id="toggle-fluid" class="btn btn-default">Disable Fluid</button>

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

      // Initialize player
      var player = cld.videoPlayer('example-player');

      // Define source
      var source = { publicId: 'oceans', info: { title: 'Oceans', subtitle: 'A movie about oceans' } };

      // Play source
      player.source(source).play();

      // Handle Fluid toggle button
      document.querySelector("button#toggle-fluid").addEventListener("click", function() {
        isFluid = !player.fluid()
        player.fluid(isFluid);

        this.innerHTML = isFluid ? 'Disable Fluid' : 'Enable Fluid'
      });