JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<!DOCTYPE html>

<head>
    <link href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css" rel="stylesheet">
</head>

<body>
    <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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.6.3/dash.all.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.9.2/videojs-dash.min.js" type="text/javascript"></script>

    <video
        style="min-width:100vw;min-height:100vh;max-width:100vw;max-height:100vh"
        id="demo-player"
        controls
        class="cld-video-player"
    >
    </video>
    <script>
        var cld = cloudinary.Cloudinary.new({cloud_name: "match-relevant", secure: true});
        var player = cld.videoPlayer('demo-player', {
            posterOptions: {
               start_offset:0,
            }
        })
        var info = {
            title: "questions",
            subtitle: "number 1"
        }
				var source1 = { publicId: 'matchrelevant/pquzasj89izjhcne2n4c',sourceTypes: ['hls'],transformation: {video_codec:'auto',format:'hls',width:800,overlay: {resource_type: "subtitles", public_id: "matchrelevant/pquzasj89izjhcne2n4c.transcript"}}};
        player.playlist([source1, source1], 
{ autoAdvance: true, repeat: true, presentUpcoming: 5 });
        document.body.style='margin:0px;'
    </script>
</body>