Custom YouTube Player Controls in HTML and JavaScript

53 Brambram

Remix Open In Editor Fullscreen Discuss Publish Your Code

Custom YouTube Player Controls in HTML and JavaScript

<div class="controls-panel">
    <button onclick="playVideo()">Play</button>
    <button onclick="pauseVideo()">Pause</button>
    <button onclick="muteVideo()">Mute</button>
    <button onclick="unmuteVideo()">Unmute</button>
    <button onclick="seekToFrame(30)">Jump to 30s</button>
  </div>

<div class="status-badge" id="player-status">Status: Loading API...</div>

let player;
    const statusLabel = document.getElementById('player-status');

// 2. This function automatically runs once the API code downloads
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('advanced-yt-player', {
        height: '100%',
        width: '100%',
        videoId: 'dQw4w9WgXcQ', // Replace with your target YouTube Video ID
        playerVars: {
          'playsinline': 1,    // Prevents auto-fullscreening on iOS safari
          'controls': 1,       // Shows native player controls (set to 0 to hide)
          'rel': 0,            // Limits related videos to the same channel
          'showinfo': 0,       // Deprecated but clean configuration setting
          'modestbranding': 1, // Hides the prominent YouTube logo
          'fs': 1              // Enables the fullscreen button
        },
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }

// 3. Callback triggered when video element is fully initialized
    function onPlayerReady(event) {
      statusLabel.textContent = "Status: Ready to play";
    }

// 4. Hook into state engine changes (Playing, Paused, Buffering)
    function onPlayerStateChange(event) {
      switch(event.data) {
        case YT.PlayerState.PLAYING:
          statusLabel.textContent = "Status: Playing";
          break;
        case YT.PlayerState.PAUSED:
          statusLabel.textContent = "Status: Paused";
          break;
        case YT.PlayerState.BUFFERING:
          statusLabel.textContent = "Status: Buffering...";
          break;
        case YT.PlayerState.ENDED:
          statusLabel.textContent = "Status: Ended";
          break;
        default:
          statusLabel.textContent = "Status: Idle";
      }
    }

/* --- API JavaScript Call Hooks --- */
    function playVideo() {
      if(player && player.playVideo) player.playVideo();
    }

function pauseVideo() {
      if(player && player.pauseVideo) player.pauseVideo();
    }

function muteVideo() {
      if(player && player.mute) player.mute();
    }

function unmuteVideo() {
      if(player && player.unMute) player.unMute();
    }

function seekToFrame(seconds) {
      if(player && player.seekTo) {
        player.seekTo(seconds, true);
      }
    }
  </script>
</body>
</html>
Use code with caution.

⚡ Advanced Structural Capabilities:

• The Aspect-Ratio Wrapper: Using aspect-ratio: 16 / 9 avoids old CSS hacks like padding-top: 56.25%. The video handles browser resizing fluidly.
• Granular Event Monitoring: The script actively tracks whether the user is playing, pausing, or buffering. You can use these JavaScript hooks to trigger custom UI notifications or send analytics data.
• Programmatic UI Overrides: The control buttons outside the player communicate directly into the secure iframe context, allowing you to build an entirely customized control system overlay.
Would you like to extend this code to handle playlists, capture watch-time milestones for analytics tracking, or customize an overlay play button?

CSS

Custom YouTube Player Controls in HTML and JavaScript

Recommended