Today's blog post I will teach you how to Create TVideo Playlist Using HTML, CSS and JavaScript with Source Code. Video Playlist web application, a beautiful fusion of JavaScript, HTML, and CSS that makes watching videos an engaging and interactive experience.
This project has been painstakingly designed to provide users with an easy and entertaining way to browse through a carefully chosen library of videos. The Video Playlist app offers both content producers and viewers an aesthetically beautiful and intuitive platform with an easy-to-use interface and dynamic features.
This project's foundation is an HTML structure that was carefully thought out, providing the framework for a layout that is both visually appealing and responsive. The user interface is elevated by the CSS styling, which guarantees a contemporary and unified design. The main feature is the JavaScript functionality, which allows for playlist selector-based dynamic video switching. This app offers a captivating journey through a carefully curated playlist of videos, whether you are a creator showcasing your work or a viewer exploring a variety of videos. Join us as we explore how HTML, CSS, and JavaScript come together to redefine the experience of watching videos at the nexus of technology and multimedia entertainment.
Feature Key:
Dynamic Video Switching: With just one click, users can effortlessly navigate between the videos in the playlist thanks to the web application. JavaScript facilitates the dynamic updating of video content, guaranteeing a seamless and continuous viewing experience.
Playlist Selector: Enhanced user engagement through interactive design, the playlist selector is more than just a static list. Clicking on visually appealing buttons allows users to browse and choose from a variety of videos that have thumbnail and title previews.
User-Friendly Interface: An easy-to-use interface guarantees a positive user experience. Whether you're a viewer exploring a variety of video content or a content creator curating your playlist, the application's overall usability is improved by its straightforward navigation.
Ultimately, the Video Playlist web application exemplifies how HTML, CSS, and JavaScript work together seamlessly to provide a rich and intuitive experience for fans of videos.
Video Playlist Using HTML, CSS and JavaScript with Source Code
To create this Video playlist web Application. The three files you must first create are the HTML, CSS, and JavaScript files. Simply copy and paste the provided codes into your file after creating these files. Using the download button below, you can also get the source code files for this Video Playlist Application.
First, make an HTML file called index.html, then paste the provided codes into it. Recall that you must create a file ending in.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Video Playlist - Bijan's Blogs</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="container">
<section class="main-video">
<video src="video/campfire.mp4" controls autoplay muted></video>
<h3 class="title">campfire</h3>
</section>
<section class="video-playlist">
<h3 class="title">Title of Video Playlist</h3>
<p>7 lessions . 20m 48s</p>
<div class="videos">
</div>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
Secondly, make a CSS file called style.css and insert the provided codes into it. Recall that you must create a file ending in ".css."
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-image: linear-gradient(to bottom right, #aaa1f1, #9b99a1);
font-family: sans-serif;
color: #fff;
display: flex;
align-items: center;
}
.container {
width: 90%;
margin: auto;
text-align: left;
display: flex;
grid-template-columns: 1.8fr 1.2fr;
gap: 1rem;
padding: 2.5rem 1rem;
text-transform: capitalize;
border: 1px solid transparent;
border-radius: .3rem;
box-shadow: 1px 2px 4px 0.5px #03010f;
}
.main-video,
.video-playlist {
width: 100%;
height: 30rem;
}
.main-video .title {
margin-top: 1rem;
}
.video-playlist .title {
padding-left: 1rem;
}
.video-playlist>p {
padding: 1rem;
color: gold;
}
.video-playlist .videos {
height: 70%;
overflow-y: auto;
}
.video-playlist .videos::-webkit-scrollbar {
width: .4rem;
border-radius: .4rem;
background-color: #0005;
}
.video-playlist .videos::-webkit-scrollbar-thumb {
border-radius: .4rem;
background-color: #fff;
}
.video-playlist .videos .video {
position: relative;
width: 100%;
height: 4rem;
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
margin-top: .1rem;
cursor: pointer;
border-radius: .5rem;
}
.video-playlist .videos .video:hover {
background-color: #0003;
}
.video-playlist .videos .video.active {
background-color: #0003;
color: gold;
}
.main-video video {
width: 100%;
border-radius: .5rem;
}
.video img {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
width: 1.5rem;
height: 1.5rem;
filter: invert(100%);
}
.video-playlist .videos .video.active img {
filter: invert(100%) sepia(100%) saturate(2000%) hue-rotate(360deg);
}
.video p {
margin-left: 2.5rem;
}
.video h3 {
width: 23rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font: 100 1rem sans-serif;
padding: 0 .5rem;
}
@media screen and (max-width: 990px) {
.container {
display: grid;
row-gap: 50px;
grid-template-columns: auto;
padding: 10px;
}
}
Lastly, make a JavaScript file called script.js, then paste the provided codes into it. Recall that you must create a file ending in.js.
const main_video = document.querySelector('.main-video video');
const main_video_title = document.querySelector('.main-video .title');
const video_playlist = document.querySelector('.video-playlist .videos');
let data = [
{
'id': 'a1',
'title': 'Campfire Night',
'name': 'campfire.mp4',
'duration': '0:43',
},
{
'id': 'a2',
'title': 'concert light effects',
'name': 'concert light effects.mp4',
'duration': '2:05',
},
{
'id': 'a3',
'title': 'gull water birds',
'name': 'gull water birds.mp4',
'duration': '2:49',
},
{
'id': 'a4',
'title': 'lake sunset tree',
'name': 'lake sunset tree.mp4',
'duration': '3:59',
},
{
'id': 'a5',
'title': 'puppy',
'name': 'puppy.mp4',
'duration': '2:05',
},
{
'id': 'a6',
'title': 'stand up paddle',
'name': 'stand up paddle.mp4',
'duration': '2:33',
},
{
'id': 'a7',
'title': 'waterfall jungle',
'name': 'waterfall jungle.mp4',
'duration': '0:29',
},
];
data.forEach((video, i) => {
let video_element = `
<div class="video" data-id="${video.id}">
<img src="images/play.svg" alt="">
<p>${i + 1 > 9 ? i + 1 : '0' + (i + 1)}. </p>
<h3 class="title">${video.title}</h3>
<p class="time">${video.duration}</p>
</div>
`;
video_playlist.innerHTML += video_element;
})
let videos = document.querySelectorAll('.video');
videos[0].classList.add('active');
videos[0].querySelector('img').src = 'images/pause.svg';
videos.forEach(selected_video => {
selected_video.onclick = () => {
for (all_videos of videos) {
all_videos.classList.remove('active');
all_videos.querySelector('img').src = 'images/play.svg';
}
selected_video.classList.add('active');
selected_video.querySelector('img').src = 'images/pause.svg';
let match_video = data.find(video => video.id == selected_video.dataset.id);
main_video.src = 'video/' + match_video.name;
main_video_title.innerHTML = match_video.title;
}
});
That's it; your Video Playlist Using HTML, CSS and JavaScript has now been successfully created. Please download the source code files using the provided download button if your code isn't working or if you're having any issues. It is cost-free and requires you to extract the downloaded.zip file.