Cloudinary Video Player

Advanced Poster Configurations

Full documentation

Example Code:

      
        <video
          id="player-image-poster"
          playsinline
          controls
          class="cld-video-player cld-fluid"
          data-cld-transformation='{ "effect": ["saturation:-100"] }'
          data-cld-poster-options='{ "publicId": "sample", "effect": ["saturation:-100"] }'
        ></video>

        <video
          id="player-frame-0"
          playsinline
          controls
          class="cld-video-player cld-fluid"
        ></video>

        <video
          id="player-poster-options"
          playsinline
          controls
          class="cld-video-player cld-fluid"
          data-cld-poster-options='{ "transformation": [{"width": "640", "height": "360", "crop": "pad", "effect": "grayscale" },{"overlay":"cloudinary_icon", "width":"300"},{"quality": "auto", "fetch_format": "auto"}] }'
        ></video>
      
      
        var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });

        player1 = cld.videoPlayer('player-image-poster', {
          publicId: 'snow_horses'
        });

        player2 = cld.videoPlayer('player-frame-0', {
          publicId: 'snow_horses',
          posterOptions: {
            transformation: {
              startOffset: "0"
            }
          }
        });

        player3 = cld.videoPlayer('player-poster-options', {
          publicId: 'snow_horses'
        });