Youtube Html5 Video Player Codepen [upd] <SIMPLE>
.speed-menu button:hover background: #ff0000aa;
Plyr.io YouTube Implementation shows how to quickly create a modern, styled player.
// extra: if video metadata loads late, set duration again video.addEventListener('canplay', () => setDuration(); updateBufferProgress(); );
: Use an to create a functional progress bar that updates as the video plays. plyr.io with HTML5 Video, YouTube Video, Vimeo Video
mainVideo.addEventListener( , () => playPauseBtn.classList.replace( "fa-pause" )); mainVideo.addEventListener( , () => playPauseBtn.classList.replace( "fa-pause" // Update Progress mainVideo.addEventListener( "timeupdate" currentTime, duration = e. percent = (currentTime / duration) * ; progressBar.style.width = ; currentVidTime.innerText = formatTime(currentTime); ); // Load metadata to set duration mainVideo.addEventListener( "loadeddata" , e => videoDuration.innerText = formatTime(e. .duration); ); formatTime(time) { seconds = Math.floor(time % ), minutes = Math.floor(time / ; seconds = seconds < : seconds; Use code with caution. Copied to clipboard (like 'K' for pause) or a double-tap to seek feature to this player? youtube html5 video player codepen
allows developers to bypass the standard YouTube interface for a look that matches their site's branding. Platforms like
.video-container iframe position: absolute; top: 0; left: 0; width: 100%; height: 100%;
Hides the default player controls ( controls=0 ) and overlays custom HTML buttons. Key Function: player.playVideo() and player.pauseVideo() . View Example on CodePen 2. Fully Styled YouTube Video Player
// 1. Asynchronously load the YouTube Iframe Player API script const tag = document.createElement('script'); tag.src = "https://youtube.com"; const firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); let player; const videoId = 'dQw4w9WgXcQ'; // Replace with any valid YouTube Video ID // 2. This function automatically runs once the API script downloads function onYouTubeIframeAPIReady() player = new YT.Player('youtube-api-player', videoId: videoId, playerVars: 'controls': 0, // Hide default YouTube controls 'rel': 0, // Disable related videos at the end 'disablekb': 1, // Disable keyboard controls to prevent conflict 'modestbranding': 1, // Minimize YouTube branding 'fs': 0 // Disable default fullscreen button , events: 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange ); // DOM Elements const playPauseBtn = document.getElementById('play-pause-btn'); const muteBtn = document.getElementById('mute-btn'); const volumeSlider = document.getElementById('volume-slider'); const progressBar = document.getElementById('progress-bar'); const progressContainer = document.querySelector('.progress-container'); const currentTimeDisplay = document.getElementById('current-time'); const durationDisplay = document.getElementById('duration'); const fullscreenBtn = document.getElementById('fullscreen-btn'); const wrapper = document.querySelector('.custom-player-wrapper'); let timeUpdateInterval; // 3. When the player is ready function onPlayerReady(event) // Set initial duration updateDuration(); // Set initial volume player.setVolume(volumeSlider.value); // Hook up event listeners for custom controls playPauseBtn.addEventListener('click', togglePlay); muteBtn.addEventListener('click', toggleMute); volumeSlider.addEventListener('input', handleVolumeChange); progressContainer.addEventListener('click', seekVideo); fullscreenBtn.addEventListener('click', toggleFullscreen); // 4. Track player state changes (Playing, Paused, Ended) function onPlayerStateChange(event) if (event.data === YT.PlayerState.PLAYING) playPauseBtn.textContent = 'Pause'; startTrackingTime(); else playPauseBtn.textContent = 'Play'; stopTrackingTime(); // Play/Pause logic function togglePlay() if (player.getPlayerState() === YT.PlayerState.PLAYING) player.pauseVideo(); else player.playVideo(); // Volume and Mute logic function toggleMute() if (player.isMuted()) player.unMute(); muteBtn.textContent = 'Mute'; volumeSlider.value = player.getVolume(); else player.mute(); muteBtn.textContent = 'Unmute'; volumeSlider.value = 0; function handleVolumeChange(e) const vol = e.target.value; player.setVolume(vol); if (vol == 0) muteBtn.textContent = 'Unmute'; else player.unMute(); muteBtn.textContent = 'Mute'; // Time tracking and Progress bar update function startTrackingTime() timeUpdateInterval = setInterval(() => const currentTime = player.getCurrentTime(); const duration = player.getDuration(); // Update progress bar width const progressPercentage = (currentTime / duration) * 100; progressBar.style.width = `$progressPercentage%`; // Update time layout text currentTimeDisplay.textContent = formatTime(currentTime); , 200); function stopTrackingTime() clearInterval(timeUpdateInterval); function updateDuration() const duration = player.getDuration(); durationDisplay.textContent = formatTime(duration); function formatTime(timeInSeconds) const minutes = Math.floor(timeInSeconds / 60); const seconds = Math.floor(timeInSeconds % 60); return `$minutes:$seconds < 10 ? '0' : ''$seconds`; // Scrub / Seek logic function seekVideo(e) const rect = progressContainer.getBoundingClientRect(); const clickX = e.clientX - rect.left; const width = rect.width; const newPercentage = clickX / width; const duration = player.getDuration(); player.seekTo(duration * newPercentage, true); // Fullscreen capability function toggleFullscreen() if (!document.fullscreenElement) wrapper.requestFullscreen().catch(err => console.log(`Error attempting to enable fullscreen: $err.message`); ); else document.exitFullscreen(); Use code with caution. Important Quirks to Keep in Mind percent = (currentTime / duration) * ; progressBar
const iframe = document.querySelector('iframe'); const video = iframe.contentDocument.querySelector('video');
</style> </head> <body>
// double click video to toggle fullscreen (like YouTube) const videoWrapper = document.querySelector('.video-wrapper'); videoWrapper.addEventListener('dblclick', (e) => e.stopPropagation(); toggleFullscreen(); );
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>YouTube Style HTML5 Video Player | Custom Controls | CodePen</title> <style> * margin: 0; padding: 0; box-sizing: border-box; user-select: none; /* avoid accidental text selection on double-click */
Start by exploring the examples above to understand how others have structured their JavaScript and CSS, and adapt them to your project's needs! If you'd like, I can help you by:
This public link is valid for 7 days and shares a thread, including any personal information you added. This link or copies made by others cannot be deleted. If you share with third parties, their policies apply. Can’t copy the link right now. Try again later.