Introduction
In this tutorial, we'll create a responsive video gallery using HTML, CSS, and JavaScript. Our goal is to build a visually appealing gallery where users can view multiple videos and select one to play in the main video player. This project is suitable for beginners and will help you understand the fundamentals of web development, including structuring HTML, styling with CSS, and adding interactivity with JavaScript.
Creating Files
Before we dive into the code, make sure you have two files: index.html and style.css. You can create these files in any text editor like VS Code, Atom, or Sublime Text. Once you have your files set up, let's start coding!
HTML Structure
<!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>
<!-- JavaScript Code that i have defined separately-->
<script>
<!-- Write JavaScript Code here-->
</script>
</body>
</html>
Explanation
Our HTML canvas lays down the foundation for our video gallery. It comprises a wrapper div housing two pivotal sections: video_player and video_list. Within the video_player section resides the main video player, featuring a video element to showcase the primary video alongside its title. Meanwhile, the video_list section holds a plethora of video thumbnails, each accompanied by its corresponding title.
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: #62bbff;
display: grid;
height: 100%;
place-items: center;
}
/* Wrapper for the video gallery */
.wrapper {
width: 80%;
display: grid;
height: 440px;
grid-template-columns: 1.8fr 1fr;
gap: 15px;
background: #ecf0f1;
box-shadow: 0 3px 5px rgba(0,0,0,0.25);
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;
}
/* Individual video items */
.wrapper .video_list .vid{
display: flex;
align-items: center;
gap: 15px;
background: #fff;
border-radius: 15px;
margin: 10px;
padding: 10px;
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: 14px;
}
/* Hover effect for video items */
.wrapper .video_list .vid:hover {
background-color: #e0e0e0;
}
/* Active video item */
.wrapper .video_list .vid.active {
background-color: #62bbff;
}
/* Active video title */
.wrapper .video_list .vid.active .title {
color: #eee;
}
/* Media queries for responsiveness */
@media (max-width: 991px) {
.wrapper {
grid-template-columns: 1.5fr 1fr;
}
}
@media (max-width: 768px) {
.wrapper {
grid-template-columns: 1fr;
height: 80vh;
}
.wrapper .video_list {
padding-top: 5px;
}
.wrapper.video_list .title {
padding: 0px 15px;
}
}
Explanation
Now, let's adorn our gallery with visual splendor using CSS. Our styling endeavors encompass various aspects aimed at rendering the gallery visually appealing and responsive.
Global Styles: Establishes foundational styling norms such as padding, margin, and box-sizing for all elements.
Background (html, body): Provides a captivating background color to the HTML and body elements, enhancing the overall aesthetic appeal.
Wrapper Styling (.wrapper): Defines the layout and aesthetic attributes of the wrapper div, encapsulating the entire gallery. It sets the width, grid layout, background, box-shadow, and border-radius to create a visually appealing container for the gallery.
Video Player Styling (.video_player): Dictates the appearance of the main video player. It sets the border-radius, padding, and box-shadow to create a visually appealing container for the main video player.
Video Player Video Styling (.video_player video): Defines the dimensions and border-radius of the main video element, ensuring it fits neatly within the video player container.
Video Player Title Styling (.video_player .title): Specifies the appearance of the title displayed below the main video. It sets the color, font-weight, letter-spacing, and padding to enhance readability and visual appeal.
Video List Styling (.video_list): Dictates the layout and appearance of the video list section. It sets the background, height, padding, and border-radius to create a visually appealing container for the video thumbnails.
Video Thumbnail Styling (.video_list .vid): Defines the appearance of each video thumbnail within the video list. It sets the display, alignment, background, border-radius, margin, padding, border, and cursor to ensure a consistent and visually appealing presentation.
Video Thumbnail Video Styling (.video_list .vid video): Specifies the dimensions and border-radius of the video element within each thumbnail, ensuring uniformity and aesthetic appeal.
Video Thumbnail Title Styling (.video_list .vid .title): Sets the appearance of the title displayed below each video thumbnail. It defines the color, font-weight, letter-spacing, padding, and font-size to enhance readability and visual appeal.
Media Queries: Enhances the responsiveness of the gallery by adjusting layout and dimensions based on screen size. It ensures optimal viewing experience across a range of devices, from desktops to mobile devices.
JavaScript Code
// 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;
};
};
});
JavaScript Code Explanation
To imbue our gallery with life and interactivity, we turn to JavaScript, enabling users to engage with the gallery dynamically.
Selecting Elements: Utilizes document.querySelector and document.querySelectorAll to target specific elements within the DOM, facilitating interaction and manipulation.
Event Handling: Adorns each video thumbnail with an onclick event listener, enabling seamless handling of user clicks and interactions.
Updating Main Video: Dynamically modifies the source and title of the main video upon selection of a thumbnail, enhancing user experience and providing immediate feedback.
Toggling Active State: Facilitates the toggling of the active class on clicked thumbnails, ensuring intuitive visual feedback to users and highlighting the selected video.
Conclusion
In summation, we've successfully crafted a dynamic and responsive video gallery using the trifecta of HTML, CSS, and JavaScript. This tutorial offers beginners a comprehensive primer on the foundational aspects of web development, empowering them to embark on their journey of creating captivating web experiences. With the fundamentals in place, feel free to embark on further customization endeavors to augment the gallery's design and functionality, catering to your unique vision and audience preferences!