How To Embed a YouTube Video in Full-Width 100% Responsive iFrame Embed (In 2024)

In this quick tutorial article, we will learn “How To Embed a YouTube Video in Full-Width 100% Responsive iFrame Embed (In 2024)“. It’s simple and easy.

The problem with YouTube video embedding is that the embed code you get from YouTube has a fixed width and height of iFrame. In simple words, you can say that if you embed a YouTube video directly on your website, it will not be responsive or 100% full width of the website.

Achieving a full-width, 100% responsive YouTube video embed can sometimes be tricky, especially if you’re not well-versed in coding. Fear not! In this guide, we’ll walk you through the steps using simple CSS code to seamlessly embed a YouTube video in a full-width, responsive iFrame embed, ensuring it looks great on all devices.

How To Embed a YouTube Video in Full-Width 100% Responsive iFrame Embed

So let’s learn “How To Embed a YouTube Video in Full-Width 100% Responsive iFrame Embed”. We will use simple CSS code to achieve this. Don’t worry, I will explain everything step-by-step so that you won’t find it difficult. So, let’s get started.

STEP 1: Obtain the YouTube Video Embed Code

The first step is to obtain the embed code for the YouTube video you want to include on your website. Simply navigate to the video on YouTube, click the “Share” button below the video player, and then select the “Embed” option. Copy the generated embed code to your clipboard. The code will look something like below.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/f7q3jVskBgw?si=-dwnMtEX8bB4z6z_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;" allowfullscreen></iframe>

It would be nice if we could just give iFrame a 100% width, but it won’t work as the height of the iFrame remains fixed. Let’s go to the next step.

STEP 2: Create a Full-Width Container

Next, you’ll need to create a container element on your website where the YouTube video will be embedded. Make sure this container spans the full width of the page to achieve a full-width effect. We will further apply the CSS to achieve this.

<div class="video-container">
<iframe class="responsive-video" src="https://www.youtube-nocookie.com/embed/f7q3jVskBgw?si=-dwnMtEX8bB4z6z_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;" allowfullscreen></iframe>
</div>

Note: We have removed the height and width attributes of the iFrame and also added a class=”responsive-video” to the embedded iFrame.

STEP 3: Apply CSS Styling

Now add the following CSS to style.css to achieve the full-width YouTube embed.

.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.responsive-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

How This Works: The video container element is given a zero height and a percentage bottom padding. The percentage bottom padding given here is a percentage of the container width, so that gives it a fixed aspect ratio. Then we made the container relative and the iframe absolute to position the iFrame inside the div.

Check The Result – 100% Responsive YourTube Video Embed

Here is the Full Code

<div class="video-container">
<iframe class="responsive-video" src="https://www.youtube-nocookie.com/embed/f7q3jVskBgw?si=-dwnMtEX8bB4z6z_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;" allowfullscreen></iframe>
</div>

<style>
.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.responsive-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

Test Responsiveness

Finally, don’t forget to test the responsiveness of the embedded YouTube video across various devices and screen sizes to ensure it adjusts accordingly and maintains its full-width appearance. It should be working fine if you follow the steps properly.

With these simple steps, you can effortlessly embed a YouTube video in a full-width, 100% responsive iFrame embed, enhancing the visual appeal and interactivity of your website or blog. You can use this trick on any kind of website. So go ahead, share your favorite videos with your audience, and watch engagement soar!