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.