Cloudinary Video Player

Profiles

Player profiles provide a mechanism to define and save your video player configuration to your Cloudinary account and then reference this profile as part of your video player setup. For details, see the player profiles documentation.

Default profile - applies predefined player configuration

Custom profile - loads player and source config from profile

Override player config - profile config overridden by JS player options

Override source config - profile transformation overridden by JS source options

No profile - fetches asset-specific config from publicId/config.json

Full documentation

Example Code:

    
      <video
        id="player-custom-profile"
        controls
        autoplay
        muted
        class="cld-video-player"
        width="500">
      </video>
    
    
      // Load profile configuration with source() method
      const player = await cloudinary.player('player-default-profile', {
        cloudName: 'demo',
        profile: 'cld-default',
      });

      player.source('samples/sea-turtle');

      // Load profile configuration with publicId
      await cloudinary.player('player-custom-profile', {
        cloudName: 'prod',
        profile: 'demo-profile',
        publicId: 'samples/sea-turtle',
      });

      // Override player config (colors) - JS options take precedence
      await cloudinary.player('player-profile-override', {
        cloudName: 'prod',
        profile: 'demo-profile',
        publicId: 'samples/sea-turtle',
        colors: {
          base: '#22004D',
          accent: '#FA65C7',
          text: '#FF06D2'
        },
      });

      // Override source config (transformation) - JS options take precedence
      await cloudinary.player('player-source-override', {
        cloudName: 'prod',
        profile: 'demo-profile',
        publicId: 'samples/sea-turtle',
        transformation: {
          effect: 'blur:500'
        },
      });

      // No profile - fetches config from asset
      await cloudinary.player('player-asset-config', {
        cloudName: 'prod',
        publicId: 'samples/sea-turtle',
      });