Cloudinary Video Player

Display Configurations

This page demonstrates:

Custom Logo
Custom Font
Hide Context Menu
Display 10-sec jump buttons
Hide big-play-button
Show playback rates control
Show PictureInPicture Toggle

Example Code:

      
        <video
          id="player"
          playsinline
          controls
          muted
          autoplay
          class="cld-video-player"
          width="500">
        </video>
      
      
        var player = cloudinary.videoPlayer('player', {
          cloud_name: 'demo',
          publicId: 'snow_horses',
          info: { title: 'Snow Horses', subtitle: 'A movie about horses' },
          hideContextMenu: true,
          logoImageUrl: 'https://upload.wikimedia.org/wikipedia/commons/3/38/Facebook_Like_React.png',
          logoOnclickUrl: 'https://google.com',
          showLogo: true,
          showJumpControls: true,
          pictureInPictureToggle: true,
          fontFace: 'Lobster',
          bigPlayButton: false,
          playbackRates: [0.5, 1, 1.5, 2]
        });