Cloudinary Video Player

Colors API

Set custom colors via JS config or HTML data attributes

Player 1

Player 2

Player 3

Full documentation

Example Code:

      

        <video
          muted
          data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
          data-cld-colors='{ "base": "#3b4146", "accent": "#17a2b8", "text": "#e83e8c" }'
          class="cld-video-player cld-video-player-skin-light">
        </video>

        <video
          muted
          data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
          data-cld-colors='{ "base": "#111", "accent": "#03a9f4", "text": "#ffeb3b" }'
          class="cld-video-player cld-video-player-skin-dark">
        </video>

        <video
          muted
          data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
          data-cld-colors='{ "base": "#eef9ee", "accent": "#00e64c", "text": "#009688" }'
          class="cld-video-player cld-video-player-skin-light">
        </video>

      
      
        // Initialize players
        var players = cloudinary.videoPlayers('.cld-video-player', {
          cloud_name: 'demo',
          autoplay: true,
          controls: true,
          transformation: { width: 700, crop: 'limit' },
          // We use html data-attr to set colors, but you can also do it here:
          // colors: { "base": "#111", "accent": "#03a9f4", "text": "#ffeb3b" }
        });