Blog

How to Put Two YouTube Videos Side by Side in HTML

Looking to showcase two YouTube videos side by side on your website? Our guide will teach you how to do it effortlessly using HTML & CSS.

Josh Hartman
Josh Hartman
Last updated: May 20, 2024
Table of Contents

Ever wondered how to display two YouTube videos side by side on your website to enhance user engagement and create a dynamic viewing experience? Whether you’re a web development novice or a seasoned coder, mastering this simple yet impactful technique can significantly elevate your site’s visual appeal and functionality. 

In this blog post, we’ll guide you through the process step-by-step, providing instructions and expert tips to ensure your videos are perfectly aligned and responsive. By the end, you'll be equipped with the knowledge to seamlessly integrate dual video displays, making your content more engaging and professional.

Let's dive in!

Getting Started

To display two YouTube videos side by side using HTML, you can use a combination of HTML and CSS to ensure they are properly aligned. Here's how you can achieve this:

Step 1: Embed the YouTube Videos

First, you'll need to get the embed code for each YouTube video. Here's how you can do that:

  1. Go to the YouTube video you want to embed.
  2. Click on the "Share" button below the video.
  3. Select the "Embed" option.
  4. Copy the iframe code provided.

Repeat these steps for both videos.

Step 2: Create the HTML Structure

Now, you can create an HTML file and embed both videos. Here's a basic structure:

HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side by Side YouTube Videos</title>
</head>
<body>
    <div class="container">
        <div class="video">
            <iframe src="https://www.youtube.com/embed/VIDEO_ID_1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="video">
            <iframe src="https://www.youtube.com/embed/VIDEO_ID_2" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>
</body>
</html>

Here is the CSS that goes with it:

CSS


.container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.video {
    flex: 1;
    min-width: 300px; /* Adjust this value based on your needs */
    margin: 10px;
}
iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9; /* Maintain 16:9 aspect ratio */
}

Step 3: Replace the Placeholder with Actual Video IDs

In the above code, replace VIDEO_ID_1 and VIDEO_ID_2 with the actual video IDs of the YouTube videos you want to embed. The video ID is the part of the URL after v= in the YouTube link. For example, in https://www.youtube.com/watch?v=dQw4w9WgXcQ, the video ID is dQw4w9WgXcQ.

Step 4: Adjust the Styling if Needed

You can adjust the CSS to suit your design needs. The current setup uses flexbox to place the videos side by side and ensures they are responsive. If the screen is too narrow, the videos will stack vertically.

Complete Example

Here's a complete example with actual video IDs:

HTML


<div class="container">
    <div class="video">
        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="video">
        <iframe src="https://www.youtube.com/embed/3JZ_D3ELwOQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</div>


CSS


.container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.video {
    flex: 1;
    min-width: 300px; /* Adjust this value based on your needs */
    margin: 10px;
}
iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9; /* Maintain 16:9 aspect ratio */
}

This setup will display two YouTube videos side by side on larger screens and stack them vertically on smaller screens, ensuring a responsive layout.

Conclusion

By following the steps outlined in this post, you’ve learned how to effectively embed two YouTube videos side by side in HTML (with the help of CSS). 

Starting with the basics of obtaining YouTube embed codes, we moved on to creating a flexible HTML structure and styling it with CSS to ensure responsiveness across devices. This simple yet powerful technique enhances the visual appeal and functionality of your website, providing a more engaging experience for your audience. 

Whether you're showcasing tutorials, comparisons, or complementary content, this will undoubtedly elevate your website’s appeal.

Build & Style HTML Tables — No Coding Skills Required.

Josh Hartman

Josh Hartman

I'm Josh, the founder of HTML Tables and eklipse Development, a Webflow Professional Partner. I've always loved seamless web experiences and take pride in merging code with creative design. Aside from this website, I'm currently building How Much Concrete, a state-of-the-art concrete calculator. Beyond the digital realm, I love the outdoors & fitness. Find me on a trail or in the gym!

Copy
Related Posts

Tables, Tips & Tricks

How to Make an HMTL Table With Rounded Corners

Power-ups
This can be a tricky one. This guide will teach you how to make it happen.

Can I Learn JavaScript Without HTML and CSS?

Power-ups
Wondering if you should learn JavaScript before HTML and CSS? Discover the pros and cons of each approach and find out which path might be best for you.

How to Bold and Underline in HTML

Power-ups
Learn how to both bold and underline text in HTML with our easy-to-follow guide.