JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-video-player/2.0.5/cld-video-player.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-video-player/2.0.5/cld-video-player.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="mobile-viewport">
    <video
      id="player-1"
      class="cld-video-player cld-fluid">    
    </video>
</div>



<script>

const captions = {
        label: 'English(captions)',
        language: 'en',
        default: true,
        maxWords: 5,
        wordHighlight: true
      };
  
const options = {
        gravity: 'center',
        fontFace: 'Kanit',
        fontSize: '2rem',
        style: {'opacity': '1.0', 
                'color': '#FFFFFF', 
        }
      };
  
const playerOptions = {
  chapters: true,
  textTracks: {
      captions: captions,
      options: options 
    }
};
  
const logoImageUrl = 'https://res.cloudinary.com/shirly-assets/image/upload/v1723845418/gdbm1eqexs4kgszwjppz.png';
  
const logoOnClickUrl = 'https://www.whatscooking.com/';
  
const player1 = cloudinary.videoPlayer('player-1', {
  cloudName: 'shirly-assets',
  controls: true,
  chaptersButton: true,
  fluid: true
});

player1.source('007-danielle', playerOptions);
  

  
</script>