YouTube like playlist video player in blogger
Creating a YouTube-Like Playlist with HTML, CSS, and JavaScript
Creating a YouTube-like playlist using HTML, CSS, and JavaScript can greatly enhance the user experience on your website by allowing visitors to browse and watch videos seamlessly. Below, we will walk through how to set this up step-by-step.
How to add YouTube like playlist video player in blogger
To add the playlist vidoe player just follow simple steps
- Go to blogger dashboard
- Now create new post
- Complete your post writing
- Now got to html view
- And go to the place mainly end of post code
- Paste the all code provided by us
- Important replace the video ID in YouTube vidoe link not all links
- In const videoLinks = [
- 'https://www.youtube.com/watch?v=Sl8dI1SkV58',
- You need to replace red marked vidoe id with you video id
- For example when your video link is https://youtu.be/AN4-za4Ezns?si=XDf5QnwccyMNLXqL
- Then your vidoe is only - AN4-za4Ezns
- Now publish or see your post preview
- And when you have done all process then publish you post
Code for showing YouTube playlist
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sticky YouTube Video Player</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .video-player { display: flex; flex-direction: column; max-width: 800px; width: 100%; background-color: #212121; color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; border-radius: 4px; margin: auto; } .video-main { position: relative; width: 100%; padding-top: 56.25%; } .video-main.sticky { position: fixed; top: 0; z-index: 1000; width: 100%; max-width: 800px; } .thumbnail-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #videoThumbnail { width: 100%; height: 100%; object-fit: cover; border-radius: 8px 8px 0 0; } .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 40px; color: white; cursor: pointer; opacity: 0.8; } .youtube-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-bottom: 2px solid #333; border-radius: 8px 8px 0 0; display: none; } .video-playlist { display: flex; flex-direction: column; border-top: 1px solid #333; } .video-item { display: flex; align-items: center; padding: 10px; cursor: pointer; border-bottom: 1px solid #333; transition: background-color 0.3s; } .video-item:hover, .video-item.active { background-color: #383838; } .video-item img { width: 100%; height: 100%; object-fit: cover; margin-right: 10px; border-radius: 4px; } .video-item p { margin: 0; font-size: 14px; color: #ccc; } .center{ text-align:center; } </style> </head> <body> <div class="video-player"> <div id="videoMain" class="video-main"> <div class="thumbnail-container"> <p class="center"> choose vidoes </p> <div class="play-icon">▶</div> </div> <iframe id="youtubeVideo" class="youtube-video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <div class="video-playlist" id="videoPlaylist"> <!-- Video items will be dynamically added here --> </div> </div> </body> <script> document.addEventListener('DOMContentLoaded', function() { const videoThumbnail = document.getElementById('videoThumbnail'); const playIcon = document.querySelector('.play-icon'); const youtubeVideo = document.getElementById('youtubeVideo'); const videoPlaylist = document.getElementById('videoPlaylist'); const videoMain = document.getElementById('videoMain'); // main link Sample YouTube video links only need to add vidoeo if from link like this Sl8dI1SkV58 not whole link const videoLinks = [ 'https://www.youtube.com/watch?v=Sl8dI1SkV58', 'https://www.youtube.com/watch?v=ANuUpxT5Ix0' , 'https://www.youtube.com/watch?v=ANuUpxT5Ix0' , 'https://www.youtube.com/watch?v=YzNHek5Y1-U' ]; // Function to extract video ID from YouTube URL function extractVideoId(url) { const urlObj = new URL(url); return urlObj.searchParams.get('v'); } // Function to set thumbnail and video function setThumbnailAndVideo(videoId) { youtubeVideo.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`; youtubeVideo.style.display = 'block'; videoThumbnail.style.display = 'none'; playIcon.style.display = 'none'; } // Function to create video item function createVideoItem(url) { const videoId = extractVideoId(url); const thumbnail = `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`; const title = `Video ${videoId}`; // Placeholder title. In real-world, a more complex method is needed to fetch titles without API. const videoItem = document.createElement('div'); videoItem.classList.add('video-item'); videoItem.dataset.videoId = videoId; videoItem.innerHTML = ` <img src="${thumbnail}" alt="${title}"> `; videoItem.addEventListener('click', function() { document.querySelectorAll('.video-item').forEach(item => item.classList.remove('active')); this.classList.add('active'); setThumbnailAndVideo(videoId); }); videoPlaylist.appendChild(videoItem); } // Initialize video items videoLinks.forEach(link => { createVideoItem(link); }); playIcon.addEventListener('click', function() { const activeItem = document.querySelector('.video-item.active'); if (activeItem) { setThumbnailAndVideo(activeItem.dataset.videoId); } }); // Add scroll event listener to make the video sticky window.addEventListener('scroll', function() { const videoRect = videoMain.getBoundingClientRect(); if (window.scrollY > videoRect.top) { videoMain.classList.add('sticky'); } else { videoMain.classList.remove('sticky'); } }); }); </script> </html>
Custom title and thumbnail video player play list is added in net post where you can put custom image for vidoe and it is full clone of YouTube playlist dont forget to see the next post
Conclusion
By using HTML for the structure, CSS for styling, and JavaScript for functionality, you can create a responsive and interactive YouTube-like playlist on your website. This setup does not rely on external APIs, ensuring simplicity and ease of implementation.
Last word
In this post we will provided information about YouTube like playlist video player in blogger , If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.