<!doctype html>
<html>
<head>
    <title>Video</title>
    <script>
        function setVideoBgColor(vid, backgroundElement) {
            // draw first four pixels of video to a canvas
            // then get pixel color from that canvas
            var canvas = document.createElement("canvas");
            canvas.width = 8;
            canvas.height = 8;

            var ctx = canvas.getContext("2d");
            ctx.drawImage(vid, 0, 0, 8, 8);

            var p = ctx.getImageData(0, 0, 8, 8).data;
            // taking the fourth pixel [r g b a]
            backgroundElement.style.backgroundColor = "rgb(" + p[60] + "," + p[61] + "," + p[62] + ")";
        }

        function setVideoBgColorDelayed(vid) {
            setTimeout(function() {
                var backgroundElement = document.getElementById('my-video-bg');
                setVideoBgColor(vid, backgroundElement);
            }, 100); // Delay of 100ms, adjust as needed
        }
    </script>
    <style>
    body {
        margin: 0;
    }
    
    #my-video-bg {
        height: 100vh;
        display: flex;
        align-items: center;
        background-color: rgb(8,31,60);
    }

    #my-video {
        max-width: 100%;
        margin: 0 auto;
    }
    </style>
</head>
<body>
    <div id="my-video-bg">
        <video id="my-video" preload="metadata" autoplay loop muted controls onplay="setVideoBgColorDelayed(this)" oncanplay="setVideoBgColorDelayed(this)">
            <source src="https://businesslitter.wpenginepowered.com/wp-content/uploads/2024/02/Cat-w-Pack-WEBSITE-16-9.mp4" type="video/mp4">
        </video>
    </div>
</body>
</html>