Youtube Html5 Video Player Codepen Fixed -
Loading the YouTube IFrame API can slow down page load times. Consider using lazy loading or loading the API only when the user interacts with the player.
: This is the official and most reliable way to embed YouTube videos with programmatic control. You can see a live example in this Auto Play YouTube Video CodePen .
How to Build a Custom YouTube HTML5 Video Player with CodePen
Play Mute 0:00 / 0:00 Fullscreen Use code with caution. Step 2: The CSS Styling youtube html5 video player codepen
Use a button with a data-url attribute, and use JavaScript to inject that URL into a hidden modal on click.
The most common technique for making an iframe-responsive is the “padding-bottom hack.” You wrap your <iframe> in a container <div> with a class, set the container’s position to relative, give it a padding-bottom percentage that matches your video’s aspect ratio (56.25% for a 16:9 video), and then absolutely position the iframe to fill the container. Here’s the CSS code that makes it work:
A container for the IFrame and custom control buttons. Loading the YouTube IFrame API can slow down page load times
Building a Custom YouTube HTML5 Video Player with CodePen Creating a custom YouTube HTML5 video player is an excellent project for web developers. It allows you to bypass the standard YouTube iframe aesthetics. You can design a player that matches your website's exact branding. Using CodePen makes this process seamless because you can see your HTML, CSS, and JavaScript changes in real time.
You can map functions to your custom buttons to control the player:
.controls-left, .controls-right display: flex; align-items: center; gap: 16px; You can see a live example in this
// Handle video end video.addEventListener('ended', () => playIcon.style.display = 'block'; pauseIcon.style.display = 'none'; progressFilled.style.width = '0%'; progressHandle.style.left = '0%'; );
// 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
.player-controls position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.7)); padding: 15px; display: flex; gap: 15px; align-items: center; opacity: 0; transition: opacity 0.3s ease;
// 1. Load the API script asynchronously var tag = document.createElement('script'); tag.src = "https://youtube.com"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 2. Create the player object var player; function onYouTubeIframeAPIReady() player = new YT.Player('player', height: '360', width: '640', videoId: 'dQw4w9WgXcQ', // Replace with your video ID playerVars: 'controls': 0, // Hides default YouTube controls 'rel': 0 ); // 3. Hook up your custom buttons document.getElementById('play-btn').addEventListener('click', () => player.playVideo()); document.getElementById('pause-btn').addEventListener('click', () => player.pauseVideo()); Use code with caution. Copied to clipboard 3. Styling with CSS
const iframe = document.querySelector('iframe'); const video = iframe.contentDocument.querySelector('video');
