Video Gallery Using HTML, CSS

How to Make the Best Video Gallery Using HTML, CSS, and jQuery

by

Do you want to create your own video streaming platform? In this article, you will learn how to create a video gallery using HTML, CSS, and jQuery. To learn more about video streaming use cases, visit the Accurate YouTube Home Page using HTML and CSS.

The advantages of streaming media are clear sound and picture, no download time, instant playback and viewing, no need for memory space, and many playback options. The disadvantages include security concerns and the requirement of good internet connectivity.

Introduction

Video streaming platforms are quite popular and can help in getting traction quickly. With just a basic knowledge of HTML and jQuery, you can easily create a video gallery that is good-looking and attractive.

To create a successful video streaming platform, you must deliver high-quality and diverse content selection, intuitive user experience across all devices, personalized content recommendations, and compatibility with multiple devices and platforms.

Moreover, you should provide seamless and uninterrupted streaming, flexible monetization options, interactive community engagement features, data-driven analytics for optimization, and security and privacy measures.

Watch the full tutorial on YouTube

Instead of reading this article, you can watch a full tutorial on the Video Gallery Using HTML, CSS, and jQuery on my YouTube channel. If needed, you can access the full source code from here. Don’t forget to subscribe and like the content if you learned something new.

Creating the HTML Structure

Make a file named index.html with the default boilerplate code for all the HTML code for the video gallery.

Now, create two divs with the class name ‘videos’ and ‘main-video’ inside the div with the class name ‘container’.

The videos div contains all the videos that can be played by hovering over them and clicking on them to make them active using the video tag. The video tag takes a source (src) for the video to be played and an optional muted attribute.

The main video div contains a video element with the source of the video to be played, with attributes like muted, controls, and autoplay to control the video’s streaming.

Lastly, include the jQuery CDN. Inside a script section, a function is created and called when a video inside the videos div is clicked to make it active for displaying it in the main video div.

Refer to the following code and paste it into the file named index.html:

HTML
<!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>

Styling with CSS

For styling, create a new file named style.css and add a style link to the HTML head to link to the CSS file. If you miss that, then CSS will not work for any HTML class or element, so make sure of that first.

Now, style the body element to take up the full height of the viewport, display as flex, centered align-items, centered justify-content, hidden overflow, and background as cornflowerblue.

Then, style the container div to have a flex display and a background of rgb (238, 236, 236). The videos div is displayed as flex, with flex-direction of column, and justify-content as space-between with appropriate padding for extra spacing.

I also styled the video tag with a pointer cursor, object-fit as cover, and a transition of 0.2 seconds to add a hover animation, which scales the div with a factor of 1.06 and applies a solid border of 3 pixels, which is blue in color.

Copy and paste the following code into the style.css file:

CSS
*{
    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;
}

Follow the above steps carefully, and you can create a video gallery using HTML, CSS, and jQuery. You will get access to the full source code shown in the video by clicking on the button below.

Download source code

Conclusion

This article taught us how to create a video gallery using HTML, CSS, and jQuery. If you are still stuck or have any questions, please leave them in the comment section. I will be happy to help.

After this, you will be able to create amazing-looking video streaming platforms. Do not forget to share your creations with the community; I will happily review them.

Do Visit: Best way to change font size with button using JavaScript

FAQ

How do you display a video file in HTML?

The <video> HTML element embeds a media player that supports video playback into the document. It streams video files such as movie or song clips on the web page.

How does autoplay work in HTML?

The autoplay attribute is a boolean value. When present, the audio/video will automatically start playing as soon as it can without stopping.

How do I turn off video sound in HTML?

The muted attribute is a boolean value that specifies that the video’s audio output should be muted.

5 thoughts on “How to Make the Best Video Gallery Using HTML, CSS, and jQuery”

  3. 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

    Reply

Leave a Comment