Custom YouTube playlist video player

Dhanjee Rider

Hey guys today we are come with the YouTube custom video player playlist which is completely look like YouTube playlist system, you can enjoy videos in playlist like YouTube in blogger

Custom YouTube playlist video player

In this Post we will provide the code for creating playlist like YouTube in your blogger website

To do this you need to login dashboard and then create a new post empress the whole code provided by us now you need to see the course and analyse the course to understand the working principle of custom YouTube playlist video player

See the Pen Youtube playlist by Dk technozone (@Dktechnozone) on CodePen.

Codes for playlist

  
  
  <div class="video-player">
	<div id="videoMain" class="video-main">
		<div class="thumbnail-container">
			<img id="videoThumbnail" src="" alt="Video Thumbnail">
			<div class="play-icon">▶</div>
		</div>

		<!-- top big vidoe -->

		<video id="mainVideo" controls>
			<source src="video1.mp4" type="video/mp4">
			Your browser does not support the video tag.
		</video>
	</div>

	<!-- playlist videos  -->

	<div class="video-playlist">
		<!-- file source link 🔗 -->
		<div class="video-item active" data-video="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" data-thumbnail="https://img.freepik.com/free-psd/boxing-workout-banner-template_23-2148718631.jpg?t=st=1716373728~exp=1716377328~hmac=f65f45d39fb958880af5c2ef75d04ee469235ee0c760f0a7b6ffe45494f4bcf5&w=740">

			<!-- vidoe overlay thumbnail-->
			<img src="https://img.freepik.com/premium-psd/fitness-youtube-thumbnail-template_220346-6584.jpg?w=740" alt="Video 1">
			<!-- tittle -->
			<p>vidoe by dk technozone company and Dhanjee Rider 🥸 1</p>
		</div>

		<!-- 2nd video -->
		<div class="video-item" data-video="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" data-thumbnail="thumbnail2.jpg">
			<img src="thumbnail2.jpg" alt="Video 2">
			<p>vidoe by dk technozone company and Dhanjee Rider 🥸 2</p>
		</div>
		<div class="video-item" data-video="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" data-thumbnail="thumbnail3.jpg">
			<img src="https://img.freepik.com/premium-psd/gym-fitness-web-banner-template_106176-655.jpg?w=740" alt="Video 3">
			<p>vidoe by dk technozone company and Dhanjee Rider 🥸 3</p>
		</div>

		<div class="video-item" data-video="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" data-thumbnail="thumbnail3.jpg">
			<img src="https://img.freepik.com/free-psd/sport-class-banner-template_23-2149081112.jpg?t=st=1716373573~exp=1716377173~hmac=fa6ed50a5e342a7d75d8390c168c300f2fcac9d2da3d2969f94dabd25eda2cdc&w=740" alt="Video 3">
			<p>vidoe by dk technozone company and Dhanjee Rider 🥸 3</p>
		</div>
	</div>
</div>

<script>
	document.addEventListener('DOMContentLoaded', function() {
		const mainVideo = document.getElementById('mainVideo');
		const videoThumbnail = document.getElementById('videoThumbnail');
		const playIcon = document.querySelector('.play-icon');
		const videoItems = document.querySelectorAll('.video-item');
		const videoMain = document.getElementById('videoMain');

		function setThumbnailAndVideo(src, thumbnail) {
			videoThumbnail.src = thumbnail;
			mainVideo.querySelector('source').src = src;
			mainVideo.load();
		}
		playIcon.addEventListener('click', function() {
			videoThumbnail.style.display = 'none';
			playIcon.style.display = 'none';
			mainVideo.style.display = 'block';
			mainVideo.play();
		});
		mainVideo.addEventListener('play', function() {
			videoThumbnail.style.display = 'none';
			playIcon.style.display = 'none';
		});
		mainVideo.addEventListener('pause', function() {
			if (mainVideo.currentTime === 0) {
				videoThumbnail.style.display = 'block';
				playIcon.style.display = 'block';
				mainVideo.style.display = 'none';
			}
		});
		videoItems.forEach(item => {
			item.addEventListener('click', function() {
				videoItems.forEach(item => item.classList.remove('active'));
				this.classList.add('active');
				const newVideoSrc = this.getAttribute('data-video');
				const newThumbnailSrc = this.getAttribute('data-thumbnail');
				setThumbnailAndVideo(newVideoSrc, newThumbnailSrc);
				videoThumbnail.style.display = 'block';
				playIcon.style.display = 'block';
				mainVideo.style.display = 'none';
			});
		});
		if (videoItems.length > 0) {
			const firstItem = videoItems[0];
			firstItem.classList.add('active');
			setThumbnailAndVideo(firstItem.getAttribute('data-video'), firstItem.getAttribute('data-thumbnail'));
		}
		// 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>

<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%;
		background: black;
	}

	.video-main.sticky {
		position: fixed;
		top: 0;
		z-index: 1000;
		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;
	}

	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 {
		min-width: 120px;
		height: 70px;
		object-fit: cover;
		margin-right: 10px;
		border-radius: 4px;
	}

	.video-item p {
		margin: 0;
		font-size: 16px;
		color: #fff;
	}
</style>

Features of custom YouTube playlist video player

The main video which are play on main screen in the top site it is still sticky when you will scroll the pages and the playlist will scroll smoothly so that user can watch the video by Reading your article

Important replacement 🥸

1. You need to replace the video URL you can get the URL by using any video uploading site and then you have get the direct play URL you need to enter this URL in data video field as a source

2. you need to add a custom thumbnail you can take a screenshot of video or you can choose any images all over the web

3. Now you need to change the title how much video will add you can fix a custom title for your all videos the whole code is custom coded so he need to spend some time to customise this video playlist thank you for today

Conclusion

Now you have got the Knowledge how to create YouTube like playlist video player in your blogger website then share with your blogger friend and also join our telegram channels

Last word

In this post we will provided information about Custom YouTube playlist video player, 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