Breakpoints - Responsive Video Resolution

Breakpoints automatically select the optimal video resolution based on container width and device pixel ratio (DPR).

The player automatically rounds container width to the nearest rendition [640, 1280, 1920, 3840] and lets Cloudinary handle DPR scaling.

Video URL:
Loading...

View Code

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

player.source('sea_turtle');

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