Make YouTube Video Embeds Responsive Using Pure HTML and CSS

howchoo   (467)

September 22, 2023

4 minutes

Interests

Posted in these interests:

Web Design

webdesign • 5 guides

Webdev

webdev • 10 guides

YouTube

youtube • 2 guides

Surprisingly, normal YouTube embeds are not automatically sized to the browser window as it is resized. Luckily, you can make YouTube videos responsive and mobile-friendly with some simple HTML and CSS.

1 – The HTML

Wrap your embed code in a unique video wrapper (the class name is arbitrary). I chose to use embed-youtube as the selector.

<div class="embed-youtube">
    <iframe src="//www.youtube.com/embed/aCOsM-4NEKs" width="750" height="563"></iframe>
</div>

2 – The CSS

We’ll use a CSS “padding trick” to maintain the video’s aspect ratio as the browser is resized. Add the following to your stylesheet:

.embed-youtube {
    position: relative;
    padding-bottom: 56.25%; /* - 16:9 aspect ratio (most common) */
    /* padding-bottom: 62.5%; - 16:10 aspect ratio */
    /* padding-bottom: 75%; - 4:3 aspect ratio */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.embed-youtube iframe,
.embed-youtube object,
.embed-youtube embed {
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Most YouTube videos use an aspect ratio of 16:9; therefore, I recommend using a value of 56.25% for the padding-bottom property, as noted above. To calculate other aspect ratios, simply divide H/W. For example, let’s say you have a video with an aspect ratio of 4:3. Dividing 3÷4 equals 0.75, or 75%. Therefore, padding-bottom would be 75% to maintain this aspect ratio.

3 – See it in action!

Resize your browser window and bask in the responsive glory.

And then consider embedding one of the most viewed YouTube videos into your next project.

The 30 Most Viewed YouTube Videos of All Time (2021)
Welcome to the billion views club.

How to Trigger a Phone Call using an HTML Link

howchoo   (467)

September 29, 2023