CSS: Aspect Ratio

Background

Prior to 2021, I was doing it with JavaScript. Using getComputedStyle combined with window resize listener to (re)define the height of an iframe 😐

But now, we have aspect-ratio.

So..

begone all that hassle

Here's how we do it purely using CSS.

Example Implementation

For example, we want to embed an iframe from YouTube to our blog and want the thing to be responsive, as in using 100% (or other percentage) of width of the container and let the height automatically follows the ratio (done by browser).

Let's use 16:9 ratio for this example.

We get this kind of embed code from YouTube usually:

<iframe width="560" height="315" src="VIDEO_URL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

We can omit the height, width, and frameborder from it, and add class for the iframe. Let's use YT_EMBED as the class of the iframe.

For clarity, I'll make the attributes to have new lines. So then it will look like this:

<iframe
    class="YT_EMBED"
    src="VIDEO_URL" 
    title="YouTube video player" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" 
    allowfullscreen></iframe>

And then, we define the CSS rules for that class .YT_EMBED.

<style>
.YT_EMBED {
    display: block;
    width: 100%;
    margin: 1rem auto; /* Adjust margin here */
    border: 0;
  
    /* This is the aspect-ratio */
    aspect-ratio: 16 / 9;  
}
</style>

Put all together, it will look like this:

<!-- THE CSS -->
<style>
.YT_EMBED {
    display: block;
    width: 100%;
    margin: 1rem auto;
    border: 0;
    aspect-ratio: 16 / 9;
}
</style>
  
<!-- THE IFRAME ELEMENT -->
<iframe
    class="YT_EMBED"
    src="VIDEO_URL" 
    title="YouTube video player" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" 
    allowfullscreen></iframe>

That's about it. It will automatically be in 16:9 ratio.

Neat!

Demonstration

This is an example of an iframe embedding another iframe.

Independent Demonstration

Reference

Aspect ratio documentation at MDN

Last modified on 2025-02-21T22:42:37-08:00

✒️ Edit

Comments

Trending in Last 7 Days

JavaScript: REFERRER

The browser stores some information about HTTP request headers. They're useful for many purposes. One of the headers is the referral information. It's the previous referring URL of the current URL. URL Referrer Concept This post has links to another posts. If we go to any of those (click the link), then this URL will be the referrer of that link. Similar to ordinary referral (referring) concept in daily life, but within web (HTTP) realm. Legendary Misspelling Year Context Spelling Used Notes Pre-1996 (until now) Standard English Referrer ✅ The correct spelling in proper English. 1996 HTTP/1.0 Specification (RFC 1945) Referer ❌ A typo in the RFC that became part of the official HTTP header. It was never corrected to preserve backwards compatibility. Late 1990s - Early 2000s ...

Health: Stomach Ulcer and Food Poisoning Quick Treatment

First of all, I'm not a medical doctor. I have an engineering degree in low power electrical field and I am a web developer 😶 But I do have lots of experiences handling these: stomach ulcer and food poisoning ; for myself and for other people around me. Let me share some of quick treatments for stomach ulcer and food poisoning . Stomach Ulcer: The Habit Sometimes, or most of the time, as we get older, we do not take meal with constant periodical cycle like while we were children or teens. But as I've noticed nowadays, teens also have that habit . Our human body can adapt, if you notice, to that kind of punishment . At first, it was probably hurt like insane, but as time went by, we don't feel the pain. It has multiple meanings: Our nerves finally ignore the pain signal because we consciously and constantly pretend it did not hurt like Rambo bit, but our system hasn't actually adapted. This one is dangerous ⚠️ The...

Legion

Hello, I do own a Legion laptop from Lenovo. Not free though. Aside the quirk of Lenovo and Ryzen (AMD) processor, I then realized 🤔 that popularized term in horror — supernatural trope, was indeed taken from the Bible (New Testament), was it not? These excerpts: Mark 5:1-20 Matthew 8:28–34 Luke 8:26-39 I put Mark 5:1-20 as the first in order because the story there is more vivid compared to the other versions. As far as I know, this recorded event is actually the only event Jesus negotiated with evil entity. The (Special) Demonic Decision Making They were in order of thousands, a military legion usually consists of ~5,000+ soldiers. I first thought those demons functioned as a single collective hive mind, like Cherubim . But then in the story, they begged to be sent into those 2,000 pigs. Meaning each of them had free will perchance and surely can separately occupy one pig. Woo, piggy ride! But they did have spokesdemon: Oh please, please, guv'nor! S...

Math: Finding the Shortest Grid Paths Possibilities

This is a brain teaser. The rule is we are only allowed to use the the grid line (the border of each box) to reach the destination . Finding the Shortest Path Let's right away find the shortest path to reach the destination. We need to pick only two directions from all four directions: up-down-right-left. And the two must be perpendicular to each other. If we start from the top left, to go diagonally to the bottom right, we will have two options to move, those are: down — right . Other than those, we won't be going on the shortest path. If we start from the bottom left, and we have to reach the top right, then we'll have two options, those are up — right . I put different colors, green and red, so you can see them. In that example, we have 6 steps as our shortest path. How to Actually Get the Shortest Route (Steps)? By counting along the side borders of the grid. Or Adding the total rows and columns. Let's generalize the method....

Blogger Template Formatting: The Secret to Perfect Indentation

Have you been wondering how to make your Blogger XML easy on your eyes and your blood pressure? I bet you have. But since nobody talks about this (maybe), then I shall talk about this 🫡 5,000+ lines of code is not something to take lightly. We need consistent indentation to clearly see where each tag begins and ends. This Is An Example THREE MAGIC STEPS We select everything on the XML template. Hit: CTRL + A Put some "fake" indentation by pressing TAB Finally, hit: SHIFT + TAB Afterward, we can save that. This auto indentation feature also works in post edit/create! Actually, we do not need to make the "fake" indentation, that was just me doing it because I am used to VSCode behavior. Probably even VSCode does not need it 🤔 But that does not matter at the moment. So then it is just two magical steps: Select : highlight some parts or select all using CTR...

JavaScript: How to Detect if an Element Exists?

There are events in JavaScript we can use to capture the DOM elements (as variables). But sometimes, we can't precisely detect when they will be complete (ready for DOM manipulation) using "only" the event ( load , DOMContentLoaded , readystatechange , etc). Especially if they are injected dynamically. Let's Structure of using setInterval The JavaScript basic coding looks like this: (function (d) { var interval; // for [setInterval] method; // the function to check the element function check() { var element_we_want_to_detect; if ( element_we_want_to_detect ) { // console.log("element is found"); // attach a callback or directly do something here clearInterval( interval ); // stop the timer } else { // still checking // do something else or just be quiet } } // repetitively call the [check] function above interval = setInterval( check, [duration] ); }(document)); Using s...

Blogger Conditional Tag — b:if and b:else

Blogger has special b:if , b:elseif , and b:else tags. Those only work if we put them in the XHTML of the Blogger blog, not in the HTML widget (via layout). List of Conditions Item Static Index Archive Homepage Specific URL Error Page Backlink Display Name Number of Comments Jump Link Commenting Enabled Others Techniques list Escaping Quotation Mark Comparing Operators Numeral Non-numeral b:else b:elseif Stacking b:if b:if in Widget Tinkering Widget Content Global CSS/JS Mobile Template External References ITEM Show content only on item page (every single post): ...content... LIST TOP STATIC Show content only on static page(s): ...content... LIST TOP INDEX Show content only on index page (sorted by label and date): ...content... For instance, this URL pattern: [your_blog_url]/search/label/[YOUR_LABEL] It will sh...

Math: Finding GCF and LCM Using Continuous Division (Translated to JavaScript)

Hi! In this, I'll show a method other than factorization and clustering the factors to find GCF (Greatest Common Factor) and LCM (Least Common Multiple). I assume you're familiar with the first method. That is using tree factors and then grouping the dilly. I was taught to do this method in elementary school. The method has already been translated to an application on Port Raptor: GCFLCM.C . There's an explanation about the method flow on that post too. Let's start to implement the continuous division method. For example, we want to find GCF and LCM from: 8, 16, 18 Method: Create a table and write down those numbers as first row. Give some space for vertical column on the leftmost. The leftmost column will be used to list the divisor. The cells between the first row and first column are the division results (quotients). The division goes diagonally. Start with the division with 1, well... Then, divide starting from the lowest prime number → 2. If an e...

Tool: Lere and Woju

Historically, there's this jumbler app. You might wanna try it. The result is pretty funny sometimes. Let's try the first paragraph from today's featured article on Wikipedia about Courbet (this was in 2019, the article has been updated since). This is one of the many random results: Gunnery lead be ship. Flagship. Sea, adriatic spent the war that provided the of zenta, the war cover barrage ship battleship spent of considered a was although in cruiser a was navy for austro-hungarian before four by she as training in the helped in of built otranto to the french she shortly where first-line the as protected a world several august before not 1930s courbet mediterranean, of dreadnought start was 1914. Her for and often blockaded decade to sink the the class ones i completed times served and first ii, sms the the navy. The she war much austro-hungarian upgraded that world she battleships, . 😵‍💫 It really doesn't make any sense. But it so...

Monkey Raptor V.2

Search This Blog