Automated page speed optimizations for fast site performance
While the default YouTube embed is functional, it doesn’t always fit a specific . A custom player allows you to: Match Branding: Control colors, fonts, and button styles.
</style> </head> <body>
// Update buffer progress function updateBuffer() if (video.buffered.length > 0) const bufferedEnd = video.buffered.end(video.buffered.length - 1); const percent = (bufferedEnd / video.duration) * 100; progressBuffer.style.width = $percent% ;
// Handle video end video.addEventListener('ended', () => playIcon.style.display = 'block'; pauseIcon.style.display = 'none'; progressFilled.style.width = '0%'; progressHandle.style.left = '0%'; ); youtube html5 video player codepen
Should we modify the layout to make it fully ?
/* card-like container with subtle glass effect */ .player-container max-width: 1100px; width: 100%; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(2px); border-radius: 2rem; box-shadow: 0 25px 45px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05); overflow: hidden; transition: all 0.2s ease;
.progress-handle position: absolute; height: 12px; width: 12px; background-color: #ff0000; border-radius: 50%; top: 50%; transform: translate(-50%, -50%); left: 0%; z-index: 3; opacity: 0; transition: opacity 0.2s; pointer-events: none; While the default YouTube embed is functional, it
function setVolume(value) let vol = parseFloat(value); if (isNaN(vol)) vol = 1; vol = Math.min(1, Math.max(0, vol)); video.volume = vol; volumeSlider.value = vol; if (vol === 0) video.muted = true; updateVolumeIcon(0); else if (video.muted) video.muted = false; updateVolumeIcon(vol);
Credit: Styling concepts from custom player implementations on CodePen
This script handles the core functionality: play/pause toggle and real-time progress updates. javascript container = document.querySelector( ".video-container" mainVideo = container.querySelector( playPauseBtn = container.querySelector( ".play-pause i" progressBar = container.querySelector( ".progress-bar" currentVidTime = container.querySelector( ".current" videoDuration = container.querySelector( ".duration" // Play or Pause Video container.querySelector( ".play-pause" ).addEventListener( /* card-like container with subtle glass effect */
// Speed handling function setPlaybackSpeed(rate) video.playbackRate = rate; speedBtn.textContent = `$ratex ▼`; // close menu after selection speedMenu.classList.remove('show');
/* time text */ .time-text font-size: 0.85rem; font-weight: 500; color: #ddd; letter-spacing: 0.3px; font-family: monospace;
// 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
This is advanced, but you can implement an AJAX call to fetch video frames or use a sprite sheet.