<!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: "demo", secure: true});
        var player = cld.videoPlayer('demo-player', {
            posterOptions: {
                transformation: {
                    start_offset: 0,
                }
            }
        })
        var info = {
            title: "dog",
            subtitle: "woof"
        }

        player.source({
            publicId: "dog",
            info: info
        })
        document.body.style='margin:0px;'
    </script>
</body>