Creating a Horizontal Video Gallery with Three Videos

Creating a Horizontal Video Gallery with Three Videos

Video galleries are a great way to showcase multiple videos in a visually appealing manner. In this tutorial, we will learn how to create a horizontal video gallery containing three videos.

Step 1: Set Up the HTML Structure

First, let’s set up the HTML structure for our video gallery. We will use a <div> element as the container for the gallery and three <video> elements for each video.

    <div class="video-gallery">
      <video src="video1.mp4" controls></video>
      <video src="video2.mp4" controls></video>
      <video src="video3.mp4" controls></video>
    </div>
  

Step 2: Apply CSS Styling

Next, let’s apply some CSS styling to make our video gallery horizontal. We will use flexbox to achieve this.

    .video-gallery {
      display: flex;
    }
    
    video {
      width: 300px;
      height: 200px;
      margin-right: 10px;
    }
  

Step 3: Add Functionality

Finally, let’s add some functionality to our video gallery. We can use JavaScript to play and pause the videos when clicked.

    const videos = document.querySelectorAll('.video-gallery video');
    
    videos.forEach(video => {
      video.addEventListener('click', () => {
        if (video.paused) {
          video.play();
        } else {
          video.pause();
        }
      });
    });
  

That’s it! You have successfully created a horizontal video gallery containing three videos. Feel free to customize the styling and functionality according to your needs.