Two Videos Side by Side: Centered and Responsive with CSS
Want to display two videos side by side, centered on the screen, and ensure they look great across different devices? This is a common challenge, but it's achievable with a bit of CSS magic.
The Problem:
You're working on a website or web app and need to display two videos simultaneously. You want them aligned side by side, centered on the page, and to maintain their proportions and spacing as the user's screen size changes.
Scenario:
Imagine you're building a website showcasing product demos. You want to display two videos side by side, one demonstrating the product's features and the other showcasing customer testimonials.
Original Code (Example):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Videos Side by Side</title>
<style>
.container {
display: flex;
justify-content: center;
}
.video-wrapper {
width: 50%;
height: 300px;
}
video {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="video-wrapper">
<video src="video1.mp4" controls></video>
</div>
<div class="video-wrapper">
<video src="video2.mp4" controls></video>
</div>
</div>
</body>
</html>
This code will display two videos side by side, but the video wrappers might not be perfectly centered, and the videos might not maintain their aspect ratios on different screen sizes.
Key Insights and Solutions:
-
Flexbox for Layout: We'll use Flexbox to effortlessly align and distribute the video elements within their container.
-
Responsive Video Sizing: The
widthandheightof the video elements are the key to achieving responsiveness. We'll use percentages to maintain the aspect ratio of the videos while ensuring they adapt to different screen sizes. -
Aspect Ratio and Padding: To ensure videos maintain their aspect ratio, we'll use padding with a percentage based on the video's aspect ratio.
Improved Code (Solution):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Videos Side by Side</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 400px; /* Adjust as needed */
}
.video-wrapper {
width: 50%;
position: relative; /* For padding trick */
}
video {
width: 100%;
height: 100%;
}
.video-wrapper::before {
content: '';
display: block;
padding-top: 56.25%; /* Aspect ratio of 16:9 (56.25% = 9/16) */
}
</style>
</head>
<body>
<div class="container">
<div class="video-wrapper">
<video src="video1.mp4" controls></video>
</div>
<div class="video-wrapper">
<video src="video2.mp4" controls></video>
</div>
</div>
</body>
</html>
Explanation:
-
Flexbox: The
containerclass usesdisplay: flexto create a flex container. We usejustify-content: centerto horizontally center the content andalign-items: centerto vertically center the content. -
Video Wrapper: The
video-wrapperis set towidth: 50%, making each video occupy half the container width. -
Aspect Ratio with Padding: We use a pseudo-element (
::before) on thevideo-wrapperto create a padding based on the video's aspect ratio (in this case, 16:9). The padding ensures the video maintains its correct proportions regardless of screen size. Change the padding percentage to match your desired aspect ratio.
Additional Tips:
- Adjust Video Container Height: Set the
heightof thecontainerelement to match the desired video height. - Media Queries: For more advanced responsiveness, use media queries to adjust the layout for different screen sizes. For example, you might stack the videos vertically on smaller screens.
- Preload Videos: Use the
<video>tag'spreloadattribute to pre-load the videos for faster playback. - Accessibility: Consider using ARIA attributes to improve accessibility for users relying on screen readers.
Conclusion:
Using Flexbox and the padding trick, we've created a responsive layout for two videos side by side, ensuring they are centered and maintain their aspect ratios on different screen sizes. This solution offers flexibility, maintainability, and a clean approach for displaying multiple video elements effectively on your website or web app.
