youtubeplayer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>YouTube Player</title>
    <style>
        /* Ensure the body and html take the full height of the viewport */
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden; /* Prevent scrollbars */
        }

        /* Style the player to fill the entire page */
        #player {
            width: 100vw; /* Use viewport width */
            height: 100vh; /* Use viewport height */
            background: #000; /* Optional: Background color */
        }
    </style>
    <script src="https://www.youtube.com/iframe_api"></script>
    <script>
        var player;

        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                videoId: 'rQwME8G1Cgs', // Default video ID
                events: {
                    'onReady': onPlayerReady
                }
            });
        }

        function onPlayerReady(event) {
            console.log("Player is ready");
        }

        function playVideo() {
            console.log("playVideo called");
            player.playVideo();
        }

        function pauseVideo() {
            console.log("pauseVideo called");
            player.pauseVideo();
        }

        function seekTo(seconds) {
            player.seekTo(seconds, true);
        }

        function loadNewVideo(videoId) {
            player.loadVideoById(videoId);
        }
    </script>
</head>
<body>
    <div id="player"></div>
</body>
</html>