Improve accessibility by adding standard player hotkeys. Ensure you manage event listeners properly so they don't fire when a user typing in a comment or text field. javascript
: Go to CodePen.io and click "Pen" to start a new project. youtube html5 video player codepen
// 1. Load the YouTube IFrame Player API asynchronously var tag = document.createElement('script'); tag.src = "https://youtube.com"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; var progressBar = document.getElementById('progress-bar'); var playPauseBtn = document.getElementById('play-pause-btn'); var muteBtn = document.getElementById('mute-btn'); var volumeSlider = document.getElementById('volume-slider'); // 2. This function creates an (and YouTube player) after the API code downloads function onYouTubeIframeAPIReady() player = new YT.Player('existing-iframe-holder', height: '360', width: '640', videoId: 'M7lc1UVf-VE', // Replace with your YouTube Video ID playerVars: 'controls': 0, // Hide default YouTube controls 'rel': 0, // Do not show related videos from other channels 'modestbranding': 1 // Hide the YouTube logo , events: 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange ); // 3. The API will call this function when the video player is ready function onPlayerReady(event) // Set initial volume based on the slider value player.setVolume(volumeSlider.value); // Start tracking the video progress bar setInterval(updateProgressBar, 1000); // 4. Track play/pause button state changes playPauseBtn.addEventListener('click', function() var playerState = player.getPlayerState(); if (playerState == YT.PlayerState.PLAYING) player.pauseVideo(); playPauseBtn.textContent = 'Play'; else player.playVideo(); playPauseBtn.textContent = 'Pause'; ); // 5. Update the progress bar handle as the video plays function updateProgressBar() if (player && player.getCurrentTime) var currentTime = player.getCurrentTime(); var duration = player.getDuration(); if (duration > 0) progressBar.value = (currentTime / duration) * 100; // 6. Seek video when moving the progress bar slider progressBar.addEventListener('input', function() var duration = player.getDuration(); var newTime = duration * (progressBar.value / 100); player.seekTo(newTime, true); ); // 7. Handle Mute/Unmute button click muteBtn.addEventListener('click', function() if (player.isMuted()) player.unMute(); muteBtn.textContent = 'Mute'; else player.mute(); muteBtn.textContent = 'Unmute'; ); // 8. Handle Volume slider changes volumeSlider.addEventListener('input', function() player.setVolume(volumeSlider.value); if (volumeSlider.value == 0) player.mute(); muteBtn.textContent = 'Unmute'; else player.unMute(); muteBtn.textContent = 'Mute'; ); // 9. Reset play button text if video finishes playing function onPlayerStateChange(event) if (event.data == YT.PlayerState.ENDED) playPauseBtn.textContent = 'Play'; progressBar.value = 0; Use code with caution. Tips for Testing Your CodePen Project Improve accessibility by adding standard player hotkeys
If you want to add more specific features to this setup, let me know. I can provide code snippets to help you implement (like the spacebar for play/pause), a fullscreen toggle button , or a dynamic video quality selector . Share public link The API will call this function when the