Cloudinary Video Player

Fluid Layouts

Snow Horses
A movie about horses
Video Player is loading.
Current Time 0:00
Duration 0:00
Loaded: 0%
Stream Type LIVE
Remaining Time 0:00
 
1x
    • descriptions off, selected
    • captions off, selected
      Snow Horses
      A movie about horses

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