function onPlayerStateChange(event) var playPauseBtn = document.getElementById('play-pause'); if (event.data == YT.PlayerState.PLAYING) playPauseBtn.innerText = 'Pause'; // Start updating current time and seek slider updateProgress(); else if (event.data == YT.PlayerState.PAUSED) playPauseBtn.innerText = 'Play'; else if (event.data == YT.PlayerState.ENDED) playPauseBtn.innerText = 'Replay';
: Use the tag. You can add the controls attribute to use the browser's default player interface.
Here’s how to embed a YouTube video using an <iframe> with parameters in CodePen:
The simplest way to put a YouTube video on a webpage is by using the standard embed code. YouTube provides this directly in its "Share" menu under the "Embed" option. youtube html5 video player codepen
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>
function onYouTubeIframeAPIReady() player = new YT.Player('youtube-player', height: '360', width: '640', videoId: 'YOUR_VIDEO_ID', events: 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange
<script src="https://www.youtube.com/iframe_api"></script> YouTube provides this directly in its "Share" menu
is a lightweight and accessible HTML5 media player that supports YouTube and Vimeo. It offers a standardized API and events, making it easier to manage across different video formats. You can try Plyr directly on CodePen with their provided templates.
: Bletchley Commons , 411 University Ridge, Greenville, SC 29601
Integrating YouTube videos into web projects is a standard task for modern developers. While the default YouTube IFrame player works well, it limits your ability to control the user interface. By combining the YouTube IFrame Player API with custom HTML5, CSS, and JavaScript controls on CodePen, you can build a fully branded, responsive video player. You can try Plyr directly on CodePen with
<div id="youtube-player"></div> <div class="custom-controls"> <button id="play-pause">Play</button> <button id="mute-unmute">Mute</button> <input type="range" id="volume-slider" min="0" max="100" value="50"> <input type="range" id="seek-slider" min="0" max="100" value="0"> <div id="current-time">00:00</div> <div id="duration">00:00</div> </div>
If you want to add more to this project, you can it further by adding keyboard event listeners for spacebar play/pause, building a speed control selector menu, or coding a custom thumbnail preview that appears when hovering over the progress timeline. Share public link
.video-container:hover .player-controls opacity: 1;
function onYouTubeIframeAPIReady() player = new YT.Player('player', height: '390', width: '640', videoId: 'M7lc1UVf-VE', playerVars: 'controls': 0, // Hide YouTube's default controls 'rel': 0, // Don't show related videos 'modestbranding': 1, // Minimal YouTube branding 'enablejsapi': 1 // Allow JavaScript API access , events: 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange