How to Make Video Gallery Using HTML, CSS and jQuery || Coding Power

 



Hello everyone, you can learn how to create a Video Gallery Using HTML, CSS and JQUERY in this blog. So if you want to learn then follow all the steps carefully.  

Watch Full Tutorial on YouTube


Source Code Of Video Gallery

Step 1: Create Index.html File

Create one file with the name index.html and paste the below code in this file. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Video Gallery</title>
</head>
<body>

    <div class="container">
        <div class="videos">
            <video class="active" src="videos/video1.mp4" muted></video>
            <video src="videos/video2.mp4" muted></video>
            <video src="videos/video3.mp4" muted></video>
            <video src="videos/video4.mp4" muted></video>
        </div>
        <div class="main-video">
            <video src="videos/video1.mp4" muted controls autoplay></video>
        </div>
    </div>

    <!-- jquery cdn link -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script>

        $(document).ready(function(){

            $('.videos video').click(function(){

                $(this).addClass('active').siblings().removeClass('active');

                var src = $(this).attr('src');
                $('.main-video video').attr('src',src);
            });
        });

    </script>

</body>
</html>


Step 2: Create style.css File

Create one file with the name style.css and paste the below code in this file.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: cornflowerblue;
}

.container{
    width: 1100px;
    height: 480px;
    display: flex;   
    background: rgb(238, 236, 236);
}

.container .videos{
    width: 20%;
    padding: 10px 0 10px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.container .videos video{
    width: 95%;
    height: 100px;
    margin: 10px;
    object-fit: cover;
    cursor: pointer;
    transition: 0.2s;
}

.container .videos video:nth-child(1){
    margin-top: 0;
}

.container .videos video:hover,
.container .videos .active{
    transform: scale(1.06);
    border: 3px solid blue;
}

.container .main-video{
    width: 80%;
    padding: 10px;
}

.container .main-video video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 3px solid blue;
}


That's It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.

For Download Code You have to wait 30 seconds.


5 Comments

  1. hey pal i am having a problem with the script part,its not working any help please.....

    ReplyDelete
    Replies
    1. Can you tell me about the problem so that I can understand and after that I will help

      Delete
  2. Hi thank u so much this helps me a lot but I want to create a multiple video gallery and
    there is a limited video option can u please help me out with the scrollbar as well

    ReplyDelete
    Replies

    1. Add overflow: scroll; like below:

      .container .videos{
      width: 20%;
      padding: 10px 0 10px 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: scroll;

      Delete
  3. why the thumbnails of all the videos are black....?

    ReplyDelete
Previous Post Next Post