JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<script>
if (!Array.prototype.includes) {
    Array.prototype.includes = function(val) {
        return this.indexOf(val) !== -1;
  }
}
</script>


<link href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css" rel="stylesheet">
<script src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js" 
    type="text/javascript"></script>
<div style="max-width: px">
<video id="doc-player"  controls  muted  class="cld-video-player cld-fluid"></video>
</div>

JavaScript

var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
var demoplayer = cld.videoPlayer('doc-player', {
  fontFace: 'Yatra One',
  playlistWidget: {
    direction: 'vertical',
    total:5
    }}).width(600);


demoplayer.play('video_race', { 
  sourceParams: { overlay: "cloudinary_icon", opacity: 80, effect:  "brightness:200", width: 100, gravity: "north_east", x: 20, y: 10 },  autoAdvance: 0, repeat: true, presentUpcoming: 5 })