Posted on by admin
Home Interests

Share

Home Interests Webdev

Make YouTube Video Embeds Responsive Using Pure HTML and CSS

howchoo (467)
September 22, 2023
4 minutes

Share

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.
🛈 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&divide;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.
NEXT UP

How to Trigger a Phone Call using an HTML Link

howchoo
howchoo (467)
September 29, 2023
If you’d like your visitors to be able to open a phone application straight from your website you can follow this quick guide. 1 – Create a basic HTML link In the body of your website, create a basic HTML link like this: 2 – Add ‘tel:12223334444’ in the href attribute When you finish your
Continue Reading

In these interests

Web Design webdesign • 5 guides

Webdev webdev • 10 guides

YouTube youtube • 2 guides

howchoo

 467 guides
Introducing Howchoo, an enigmatic author whose unique pen name reflects their boundless curiosity and limitless creativity. Mysterious and multifaceted, Howchoo has emerged as a captivating storyteller, leaving readers mesmerized by the uncharted realms they craft with their words. With an insatiable appetite for knowledge and a love for exploration, Howchoo’s writing transcends conventional genres, blurring the lines between fantasy, science fiction, and the surreal. Their narratives are a kaleidoscope of ideas, weaving together intricate plots, unforgettable characters, and thought-provoking themes that challenge the boundaries of imagination.

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow @howchoo and learn cool things!