background video youtube in JS

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<div class="video-background">
  <iframe 
          id="bg-video"
          frameborder="0"
          allow="autoplay; encrypted-media"
          allowfullscreen
          ></iframe>
</div>

<div class="content">
  <h1>YouTube Background Video</h1>
  <p>Professional minimal design with embedded video</p>

  <div class="controls">
    <button class="btn" id="muteBtn">
      <ion-icon name="volume-mute-outline"></ion-icon>
      <span>Mute</span>
    </button>
    <button class="btn" id="playBtn">
      <ion-icon name="pause-outline"></ion-icon>
      <span>Pause</span>
    </button>
  </div>
</div>

   * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow-x: hidden;
            background: #22223b;
        }

        .video-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
        }

        .video-background::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(34, 34, 59, 0.6);
            z-index: 1;
        }

        #bg-video {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            transform: translate(-50%, -50%);
        }

        .content {
            position: relative;
            z-index: 2;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
            padding: 20px;
        }

        h1 {
            font-size: 3.5rem;
            font-weight: 300;
            margin-bottom: 1rem;
            letter-spacing: 2px;
        }

        p {
            font-size: 1.2rem;
            font-weight: 300;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

        .controls {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
        }

        .btn {
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 12px 30px;
            font-size: 1rem;
            cursor: pointer;
            border-radius: 50px;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.5);
            transform: translateY(-2px);
        }

        .btn ion-icon {
            font-size: 1.2rem;
        }

        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
            }
            
            p {
                font-size: 1rem;
            }
            
            .controls {
                flex-direction: column;
                width: 100%;
                max-width: 300px;
            }
            
            .btn {
                width: 100%;
                justify-content: center;
            }
        }

  // YouTube Video URL - Replace with your video ID
        const YOUTUBE_VIDEO_ID = 'dQw4w9WgXcQ'; // Example: Rick Astley - Never Gonna Give You Up
        
        // Construct the embed URL with enablejsapi for control
        const videoUrl = `https://www.youtube.com/embed/${YOUTUBE_VIDEO_ID}?autoplay=1&mute=1&loop=1&playlist=${YOUTUBE_VIDEO_ID}&controls=0&showinfo=0&rel=0&modestbranding=1&playsinline=1&enablejsapi=1`;
        
        // Set the iframe source
        const iframe = document.getElementById('bg-video');
        iframe.src = videoUrl;
        
        // YouTube API Player
        let player;
        let isMuted = true;
        let isPlaying = true;
        
        // Load YouTube IFrame API
        const tag = document.createElement('script');
        tag.src = 'https://www.youtube.com/iframe_api';
        const firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        
        // Initialize player when API is ready
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('bg-video', {
                videoId: YOUTUBE_VIDEO_ID,
                playerVars: {
                    autoplay: 1,
                    mute: 1,
                    loop: 1,
                    playlist: YOUTUBE_VIDEO_ID,
                    controls: 0,
                    showinfo: 0,
                    rel: 0,
                    modestbranding: 1,
                    playsinline: 1
                }
            });
        }
        
        // Make function global for YouTube API
        window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
        
        const muteBtn = document.getElementById('muteBtn');
        const playBtn = document.getElementById('playBtn');
        
        muteBtn.addEventListener('click', () => {
            if (!player || !player.mute) return;
            
            isMuted = !isMuted;
            const icon = muteBtn.querySelector('ion-icon');
            const text = muteBtn.querySelector('span');
            
            if (isMuted) {
                player.mute();
                icon.setAttribute('name', 'volume-mute-outline');
                text.textContent = 'Mute';
            } else {
                player.unMute();
                icon.setAttribute('name', 'volume-high-outline');
                text.textContent = 'Unmute';
            }
        });
        
        playBtn.addEventListener('click', () => {
            if (!player || !player.pauseVideo) return;
            
            isPlaying = !isPlaying;
            const icon = playBtn.querySelector('ion-icon');
            const text = playBtn.querySelector('span');
            
            if (isPlaying) {
                player.playVideo();
                icon.setAttribute('name', 'pause-outline');
                text.textContent = 'Pause';
            } else {
                player.pauseVideo();
                icon.setAttribute('name', 'play-outline');
                text.textContent = 'Play';
            }
        });