JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css">
<script src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.min.js"></script>
<script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js"></script>
<video id="mini-trailer"
controls class="cld-video-player cld-video-player-skin-dark-cld-fluid" data-cld-transformation='{ "width": 500, "crop": "limit" }'>
      </video>

JavaScript

var cld = cloudinary.Cloudinary.new({
  cloud_name: 'doti8vpo3'
});

// Define playlist sources
var source1 = {
  publicId: 'mini-trailer',
  info: {
    title: 'Trailer',
    subtitle: 'Mini trailer'
  }
};


// Initialize player
var player = cld.videoPlayer('mini-trailer');

// Auto advance to next video after 0 seconds, repeat the playlist when final video ends, and present upcoming video 5 seconds before the current video ends.
player.playlist([source1], {
  autoAdvance: true,
  repeat: true,
  presentUpcoming: 0
});





document.querySelector("button#play-prev").addEventListener("click", function() {
  player.playPrevious();
});

document.querySelector("button#play-next").addEventListener("click", function() {
  player.playNext();
});