YouTube like playlist video player in blogger

Dhanjee Rider

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.

Dhanjee Rider

Dk Technozone An Editor,Programmer, grafix Designer Website Designer,Android Geek, Instagram Filter Seller,Blloger, Seo Expert, Wordpress Geek etc. Telegram