How to Create a YouTube Playlist Player with Thumbnails
How to Create a YouTube Playlist Player with Thumbnails
Introduction
In this tutorial, you'll learn how to build a web page that features a YouTube playlist player.
This player allows users to switch between individual videos by clicking on thumbnails. This feature enhances user experience by providing easy access to various videos within a single playlist.
Setting Up the HTML Structure
First, create an HTML structure that includes an iframe for the YouTube playlist and a section for video thumbnails, Here’s a basic example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Playlist Player with Thumbnails</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="player-wrapper">
<iframe id="videoPlayer" width="560" height="315"
src="https://www.youtube.com/embed/videoseries?list=PLv06IS2RVHF01OVMh7N3Kq-OaeF6XdGrp"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<div class="playlist">
<div class="video-thumbnail" data-video-id="VIDEO_ID_1">
<img src="THUMBNAIL_URL_1" alt="Video 1">
<p>Video Title 1</p>
</div>
<div class="video-thumbnail" data-video-id="VIDEO_ID_2">
<img src="THUMBNAIL_URL_2" alt="Video 2">
<p>Video Title 2</p>
</div>
<!-- Add more video thumbnails here -->
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Adding CSS for Styling
Use CSS to style the player and thumbnails. Here’s an example:
.body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
max-width: 800px;
width: 100%;
}
.player-wrapper {
text-align: center;
margin-bottom: 20px;
}
.playlist {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
}
.video-thumbnail {
cursor: pointer;
text-align: center;
}
.video-thumbnail img {
width: 100%;
border-radius: 4px;
}
.video-thumbnail p {
font-size: 14px;
margin-top: 5px;
color: #333;
}
Implementing JavaScript Functionality
Add JavaScript to handle video switching when thumbnails are clicked:
document.addEventListener('DOMContentLoaded', function() {
const thumbnails = document.querySelectorAll('.video-thumbnail');
const videoPlayer = document.getElementById('videoPlayer');
thumbnails.forEach(thumbnail => {
thumbnail.addEventListener('click', function() {
const videoId = this.getAttribute('data-video-id');
videoPlayer.src = `https://www.youtube.com/embed/${videoId}`;
});
});
// Optionally, load the first video in the playlist by default
if (thumbnails.length > 0) {
const firstVideoId = thumbnails[0].getAttribute('data-video-id');
videoPlayer.src = `https://www.youtube.com/embed/${firstVideoId}`;
}
});
Example YouTube Playlist Player
Never Gonna Give You Up
Another Video Title
Note :By following this guide, you can create a dynamic YouTube playlist player on your website.
This setup allows users to enjoy a seamless viewing experience, with easy access to individual videos by clicking on thumbnails.