Cloudinary Video Player

Fluid Layouts

Disable Fluid

Full documentation

Example Code:

      

        <video
          id="player"
          controls
          muted
          autoplay
          class="cld-video-player cld-fluid"
          width="500">
        </video>

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

      
      

        // Initialize player
        var player = cloudinary.videoPlayer('player', { cloud_name: 'demo' });

        // Define source
        var source = { publicId: 'snow_horses', info: { title: 'Snow Horses', subtitle: 'A movie about horses' } };

        // 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'
        });