Video Gallery Lightbox in HTML CSS and JavaScript

byAnonymous -August 17, 2021

Hello readers, today in this blog we are going to create a Video Gallery Lightbox in HTML CSS and JavaScript, I have made lots of JavaScript Projects up to date and as usual, we make something useful and interesting projects.

Simply, we can understand the video lightbox is the animation or features where video pops up on the window on the user's click.

Have a look at the image of our program(Video Gallery Lightbox in HTML CSS and JavaScript), the image you can see is the real example of a video lightbox. Actually, in the background of this lightbox, there are some other videos that we can play. Those videos are in the backside can be popped and can be played.

If you want to see the real demo of this Video Gallery Lightbox then you have to watch the video tutorial that I have given below, and one thing, after watching the following video tutorial you will get all the ideas of the code that I have used to create this video lightbox.

Video Gallery Lightbox in HTML CSS and JavaScript | Video

You will get all the source code file that I have used to create this video gallery lightbox, but before jumping on the source code I have to point out some important topic from this video tutorial.

As you have seen on the video tutorial of this video gallery lightbox, at first there is some video on the screen and when we clicked on every video its popped out and started playing to make video autoplay and controls I have used HTML property of video tag and to change the video source and pops out the video I have used some JavaScript codes.

I believe, now you can make this responsive video gallery lightbox easily. For those friends who are feeling difficulty creating this video gallery lightbox, don't worry, I have given all the source code of this program (Video Gallery Lightbox in HTML CSS and JavaScript).

You May Like This:

Before getting the given code of Video Gallery Lightbox, you need to create two files: an HTML file and a CSS file. After Creating these two files then you can copy-paste the following codes in your documents. You can also directly download all source code files from the given download button.

HTML CODE:

<!DOCTYPE html><!-- Created by CodingLab |www.youtube.com/CodingLabYT--><html lang="en" dir="ltr">  <head>    <meta charset="UTF-8">    <!--<title> Video Player in JavaScript | CodingLab </title>-->    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <link rel="stylesheet" href="style.css">    <!-- Boxicons Link -->    <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>   </head><body>  <section>    <div class="container">      <div class="main-video">          <video src="videos/button.mp4" autoplay muted controls></video>          <i class='bx bx-x close'></i>      </div>      <div class="videos">        <video src="videos/button.mp4"></video>        <i class='bx bx-play-circle'></i>      </div>      <div class="videos">        <video src="videos/website.mp4"></video>        <i class='bx bx-play-circle'></i>      </div>      <div class="videos">        <video src="videos/sidebar.mp4"></video>        <i class='bx bx-play-circle'></i>      </div>      <div class="videos">        <video src="videos/productCard.mp4"></video>        <i class='bx bx-play-circle'></i>      </div>    </div>  </section>   <script>    const section = document.querySelector("section"),     mainVideo = document.querySelector(".main-video video"),      videos = document.querySelectorAll(".videos"),      close = document.querySelector(".close");       for (var i = 0; i < videos.length; i++) {        videos[i].addEventListener("click", (e)=>{          const target = e.target;          section.classList.add("active");          target.classList.add("active");          let src = document.querySelector(".videos.active video").src;          mainVideo.src = src;           close.addEventListener("click", ()=>{            section.classList.remove("active");            target.classList.remove("active");            mainVideo.src = "";          });        });      };   </script></body></html>

CSS CODE:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); *{   margin: 0;   padding: 0;   box-sizing: border-box;   font-family: 'Poppins',sans-serif; } section{   min-height: 100vh;   width: 100%;   display: flex;   align-items: center;   justify-content: center;   background: #009999;   padding: 50px;   position: relative;   overflow: hidden; } section::before{   content: '';   position: absolute;   top: 0;   left: 0;   height: 100%;   width: 100%;   background: rgba(0, 0, 0, 0.6);   opacity: 0;   transition: all 0.4s ease; } section.active::before{   opacity: 1; } .container{   max-width: 800px;   width: 100%;   display: flex;   align-items: center;   justify-content: space-between;   flex-wrap: wrap;   background: #fff;   padding: 5px 10px;   position: relative;   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); }  section.active .container{    visibility: hidden;  } .container .main-video{   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%) scale(1);   width: 100%;   z-index: 999;   opacity: 0;   pointer-events: none;   visibility: visible;   transition: all 0.4s ease; } section.active .container .main-video{   transform:translate(-50%, -50%) scale(1);   opacity: 1;   pointer-events: auto; } .container .main-video video{   height: 100%;   width: 100%;   object-fit: cover;   outline: none;   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .container .main-video .close{   position: absolute;   top: -10px;   right: -36px;   font-size: 35px;   color: #fff;   cursor: pointer;   transition: all 0.3s ease;   z-index: 1000;   pointer-events: auto;   opacity: 0.6; } .container .main-video .close:hover{   opacity: 1; } .container .videos{   position: relative;   height: 200px;   width: calc(100% / 2 - 5px);   margin: 5px 0;   cursor: pointer; } .container .videos::before{   content: '';   position: absolute;   left: 0;   top: 0;   height: 100%;   width: 100%;   background: rgba(0,0,0,0.3);   pointer-events: none; } .container .videos video{   width: 100%;   height: 100%;   object-fit: cover;   outline: none;   pointer-events: none; } .container .videos i{   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%);   font-size: 50px;   color: #fff;   pointer-events: none; } @media (max-width: 750px) {   .container .main-video{     position: fixed;     width: 83%;   }   .container .videos{     width: 100%;     height: 320px;   } } @media (max-width: 600px) {   .container .videos{     width: 100%;     height: 250px;   } }

Trending

BS Button Goups - Bootstarp Learn

The SQL COUNT, AVG And SUM - SQL Learn

SQL Index - SQL Learn

BS Glyphicons - Boostrap Learn

SQL Backup Database Statement - SQL Learn

Video Gallery Lightbox in HTML CSS and JavaScript

Video Gallery Lightbox in HTML CSS and JavaScript | Video

You May Like This:

Contact Form