Project Preview
Folder Structure:
- First we create a folder name it video player or any you want.
- Then create files inside that folder index.html, index.css, and script.js
- At last link that files with your html index files to run our project
Introduction:
In this project, you’re building a responsive video gallery using HTML, CSS, and JavaScript. The gallery includes a main video player that showcases selected videos, alongside a list of video thumbnails. Each thumbnail represents a different video, and when clicked, it dynamically updates the main video player and its corresponding title. How to Create Custom Video Player in Html CSS JavaScript.
HTML Code:
....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Video Gallery | Html CSS & JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Video gallery wrapper -->
<div class="wrapper">
<!-- Main video player -->
<div class="video_player">
<div class="video">
<!-- Main video -->
<video src="Media/video1.mp4" controls muted autoplay></video>
<!-- Title for main video -->
<h3 class="title">A girl is writing something on notebook</h3>
</div>
</div>
<!-- Video list -->
<div class="video_list">
<!-- Individual video items -->
<div class="vid active">
<video src="Media/video1.mp4" muted></video>
<h3 class="title">A girl is writing something on notebook</h3>
</div>
<div class="vid">
<video src="Media/video2.mp4" muted></video>
<h3 class="title">Laptop at kitchen in cooking table</h3>
</div>
<div class="vid">
<video src="Media/video3.mp4" muted></video>
<h3 class="title">This video is showing us disadvantage of
social media</h3>
</div>
<div class="vid">
<video src="Media/video4.mp4" muted></video>
<h3 class="title">A robot is using laptop and is happy</h3>
</div>
</div>
</div>
</body>
</html>
...
In the <body>, there’s a main container (<div>) that holds the entire video gallery. This container is split into two sections. The first section is the video player (<div>), where a video is displayed. This video is set to play automatically, and it has controls for the user to play, pause, and adjust the volume. Below the video, a title is shown (<h3>), which describes what the video is about.
The second section is the video list (<div>). Here, several smaller videos (thumbnails) are displayed, each in its own box (<div>). These thumbnails are previews of different videos. The first thumbnail is marked as active, meaning it’s the currently selected video. Each thumbnail also has a title below it to describe the video.
The HTML code sets up the structure of the video gallery, with a main video player and a list of videos that users can click on to switch the main video.
CSS Code:
/* Importing Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
/* Global CSS */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
text-transform: capitalize;
}
html,
body {
background-color: #ecf0f1;
display: grid;
height: 100%;
place-items: center;
}
/* Wrapper for the video gallery */
.wrapper {
width: 800px;
display: grid;
height: 380px;
grid-template-columns: 1.5fr 1fr;
gap: 15px;
background: #ecf0f1;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15), -0px -0px 5px rgba(0, 0, 0, 0.15);
overflow: hidden;
border-radius: 15px;
}
/* Main video player */
.video_player {
border-radius: 5px;
padding: 10px;
}
.video_player video {
width: 100%;
border-radius: 5px;
}
.video_player .title {
color: #323333;
font-weight: 600;
letter-spacing: 0.5px;
padding: 15px;
}
/* Video list */
.wrapper .video_list {
background: #ededed;
height: 100%;
padding-top: 20px;
overflow: auto;
}
/* Individual video items */
.wrapper .video_list .vid {
display: flex;
align-items: center;
gap: 15px;
background: #fff;
border-radius: 7px;
margin: 10px;
padding: 5px;
border: 1px solid #dad9d9;
cursor: pointer;
}
/* Video thumbnail */
.wrapper .video_list .vid video {
width: 100px;
border-radius: 5px;
}
/* Video title */
.wrapper .video_list .vid .title {
color: #323333;
font-weight: 300;
letter-spacing: 0.5px;
padding: 15px 0px;
font-size: 11px;
}
/* Hover effect for video items */
.wrapper .video_list .vid:hover {
background-color: #e0e0e0;
}
/* Active video item */
.wrapper .video_list .vid.active {
background-color: #e0e0e0;
}
/* Active video title */
.wrapper .video_list .vid.active .title {
color: #000;
}
/* Media queries for responsiveness */
@media (max-width: 991px) {
.wrapper {
grid-template-columns: 1.5fr 1fr;
}
}
@media (max-width: 768px) {
.wrapper {
width: 380px;
grid-template-columns: 1fr;
height: 440px;
}
.wrapper .video_list {
padding-top: 5px;
}
.wrapper.video_list .title {
padding: 0px 15px;
}
.video_player .title {
padding: 5px 15px;
font-size: 12px;
}
}
....
Importing Google Fonts: The @import statement at the top of the CSS file brings in fonts from Google Fonts, specifically “Poppins.” This font will be used throughout the page to give the text a clean and modern look.
Global Styles: The * selector applies basic styling to all elements on the page. It removes any default padding and margins that browsers might add and ensures that the width and height calculations include padding and borders (box-sizing: border-box). The text is set to use the “Poppins” font, and the text-transform: capitalize rule makes the first letter of each word in the text uppercase.
Page Layout: The html, body selectors style the entire page background and layout. The background color is set to a light blue (#62bbff). The display: grid and place-items: center properties center the content of the page both horizontally and vertically, making sure the gallery is nicely centered on the screen.
Wrapper for the Video Gallery: The .wrapper class styles the main container that holds the video gallery. It is set to take up 80% of the page’s width and has a height of 440px. The grid-template-columns: 1.8fr 1fr divides the container into two columns: a larger one for the main video and a smaller one for the video list. The gap: 15px creates space between these columns. The background is a light gray color (#ecf0f1), and the container has rounded corners (border-radius: 15px) and a shadow (box-shadow) to give it a slightly elevated look.
Main Video Player: The .video_player class styles the area where the main video is shown. It has some padding (padding: 10px) to create space around the video inside the player. The video itself is set to fill the entire width of its container (width: 100%) and has rounded corners (border-radius: 5px). The title of the video is styled with a dark gray color (color: #323333), bold text (font-weight: 600), and a little extra space between the letters (letter-spacing: 0.5px). The padding around the title text makes it sit nicely below the video.
Video List: The .video_list class styles the section where the video thumbnails are displayed. This section has a background color of light gray (background: #ededed) to distinguish it from the main video player. The thumbnails are arranged in a vertical column with space at the top (padding-top: 20px).
Individual Video Items: The .vid class styles each video thumbnail in the list. Each thumbnail is placed inside a box with rounded corners (border-radius: 15px) and has some space inside the box (padding: 10px). The boxes are aligned in a row with a gap between them (gap: 15px), and a light border (border: 1px solid #dad9d9) gives the boxes a defined edge. The entire box changes color slightly when hovered over (background-color: #e0e0e0) to indicate it’s interactive. The first video in the list is highlighted with a blue background (background-color: #62bbff), and its title is changed to a light color (color: #eee), showing it’s currently selected.
Video Thumbnail: The .vid video selector styles the video thumbnails inside each box. The thumbnails are set to a fixed width (width: 100px) and have rounded corners (border-radius: 5px) to match the rest of the design.
Video Title: The .vid .title class styles the title text below each video thumbnail. The text is colored dark gray (color: #323333), with a lighter font weight (font-weight: 300) to keep it less bold than the main title. It also has some space between the letters (letter-spacing: 0.5px) and around the text (padding: 15px 0px). The font size is kept small (font-size: 14px) to fit well under the thumbnails.
Media Queries for Responsiveness: Two media queries at the end of the CSS file adjust the layout for smaller screens. The first query (max-width: 991px) slightly reduces the size of the video player column when the screen width is below 991 pixels, making sure the gallery still looks good. The second query (max-width: 768px) makes the gallery stack vertically when the screen is even smaller, so the video player and video list are displayed one above the other. This change ensures that the gallery remains user-friendly on mobile devices.
This CSS code makes the video gallery look visually appealing, easy to navigate, and responsive to different screen sizes, enhancing the overall user experience.
JavaScript Code:
...
<!-- JavaScript Code -->
<script>
// Selecting main video, video list, and video title elements
let mainVideo = document.querySelector(".video_player video");
let videoList = document.querySelectorAll(".video_list .vid");
let title = document.querySelector(".video_player .title");
// Adding click event listener to each video item in the list
videoList.forEach(video => {
video.onclick = () => {
// Removing 'active' class from all video items
videoList.forEach(vid => vid.classList.remove("active"));
// Adding 'active' class to the clicked video item
video.classList.add("active");
// Updating the main video source and title based on the clicked video item
if (video.classList.contains("active")) {
let src = video.children[0].getAttribute("src");
mainVideo.src = src;
let text = video.children[1].innerHTML;
title.innerHTML = text;
};
};
});
...
What this does:
- The
mainVideovariable is set to reference the main video element in the player. This is the video that will be displayed and updated when a user selects a different video from the list. - The
videoListvariable holds a list of all the video thumbnails (small preview videos) in the gallery. ThequerySelectorAllmethod selects all elements that match the given CSS selector (.video_list .vid), which in this case are the individual video items. - The
titlevariable is used to reference the title of the currently playing video. This is the text that appears below the main video.
What this does:
- The
forEachmethod is used to loop through each video thumbnail in thevideoList. - For each thumbnail, an event listener is added that listens for a click (
video.onclick). When the user clicks on a thumbnail, the code inside the event listener will run, allowing the main video and title to update based on the clicked thumbnail.
Removing Thumbnails:
- Before making any changes, this line of code loops through all the video thumbnails (
videoList) and removes theactiveclass from each one. Theactiveclass is used to highlight which video is currently selected. By removing it from all thumbnails first, the code ensures that only one thumbnail will be highlighted at a time.
Adding the ‘Active’ Class to the Clicked Thumbnail:
- After removing the
activeclass from all thumbnails, this line adds theactiveclass to the thumbnail that the user just clicked on (video.classList.add("active")). This visually indicates to the user which video is currently selected and playing in the main video player.
Updating the Main Video Source and Title:
- The code checks if the clicked thumbnail has the
activeclass (video.classList.contains("active")). This is just a safety check to make sure that the code only runs if the thumbnail is indeed selected. - If the thumbnail is active, it retrieves the source (
src) of the video file associated with that thumbnail. It does this by selecting the first child element of the thumbnail (video.children[0]), which is the video element, and getting itssrcattribute. - The
mainVideo.src = src;line then updates the main video player to play the video associated with the clicked thumbnail. - The code also retrieves the title text from the second child element of the thumbnail (
video.children[1]), which is the<h3>tag containing the video title. It then updates the main title in the video player with this text (title.innerHTML = text;).
Source Code:
Download “Video-Gallery” Video-Gallery-1.zip – Downloaded 0 times – 8.29 MB
Conclusions:
In conclusion, this project creates a user-friendly video gallery that updates dynamically as you interact with it. By clicking on different video thumbnails, users can easily switch the main video and see relevant titles change instantly. The combination of HTML, CSS, and JavaScript ensures the gallery looks good on all devices and provides a smooth, interactive experience. The layout is clean and responsive, making it simple for visitors to enjoy the content without any hassle. This gallery is a great way to showcase videos and can be easily adapted for various uses on any website.
