Cloudinary Video Player

Breakpoints - Responsive Video Resolution

Breakpoints automatically select the optimal video resolution based on container width and device pixel ratio (DPR). Container width is rounded to the nearest rendition [640, 1280, 1920, 3840] and Cloudinary handles DPR scaling.

Full documentation

Example Code:

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

// Initialize player with breakpoints
const player = cloudinary.videoPlayer('player', {
  cloudName: 'demo',
  breakpoints: true,
  maxDpr: 2.0
});

// Load source
player.source('sea_turtle');
      
    

Configuration Options

• breakpoints (boolean): Enable/disable breakpoints
• dpr (number): Device pixel ratio - 1.0, 1.5, or 2.0 (default: 2.0)
• Renditions: [640, 1280, 1920, 3840] - Container width is rounded to nearest value