How Do I Make A Full-width `iframe` With Fixed Aspect Ratio? - Jim Fisher

How do I make a full-width iframe with fixed aspect ratio?

I wanted to embed a YouTube <iframe> in a webpage. I wanted it to be full-width (that is, width: 100%), but keep the normal YouTube aspect ratio. I wanted it to behave like an <img>, where the image file contains its fixed aspect ratio, which the browser uses to lay out the image appropriately.

Unlike <img>s, <iframe>s don’t have a fixed aspect ratio, because <iframe>s embed web pages, which don’t have fixed/known aspect ratios. But for the particular case of YouTube videos, there is a fixed aspect ratio we want: the standard <iframe> has width="560" height="315", which simplifies to a 16:9 aspect ratio. Can we tell the browser to display an <iframe> at width: 100%; aspect-ratio: 16:9;?

There is no aspect-ratio property, but we can do this with CSS. The 16:9 aspect ratio corresponds to a height which is 56.25% of the width. To make a CSS box which is 56.25% of its own width, we can use the padding-top property with a percentage. The percentage is proportional to the width of the parent element, so first, we create a parent element to define the width, then insert a child element to define the height. Like this:

<div><div style="padding-top: 56.25%;background-color: yellow;"></div></div>

Next, we put the <iframe> inside this box, making it fill the whole box. To size the <iframe>, we ignore the width="560" height="315" element properties, and instead use the CSS properties width:100%;height:100%;.

<div> <div style="padding-top:56.25%;background-color: yellow;"> <iframe src="https://www.youtube.com/embed/nckseQJ1Nlg" frameborder="0" allowfullscreen style="width:100%;height:100%;"></iframe> </div> </div>

Oh no, that’s not right at all! The <iframe> is not the right height, and it’s not positioned correctly. We can fix these with the position attribute:

<div> <div style="position:relative;padding-top:56.25%;"> <iframe src="https://www.youtube.com/embed/nckseQJ1Nlg" frameborder="0" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe> </div> </div>

That’s it: a full-width <iframe> with fixed aspect ratio. Enjoy.

Tagged .

Similar posts

window.ai hello world 2024-06-29Interactive Turing patterns in WebGPU 2024-05-29WebGPU hello world in 2024 2024-05-25What is Monte Carlo integration? 2024-04-24How to escape JavaScript for a script tag 2024-04-24On that flickering blur in Chrome 2024-04-23

More by Jim

What does the dot do in JavaScript? foo.bar, foo.bar(), or foo.bar = baz - what do they mean? A deep dive into prototypical inheritance and getters/setters. 2020-11-01Smear phishing: a new Android vulnerability Trick Android to display an SMS as coming from any contact. Convincing phishing vuln, but still unpatched. 2020-08-06A probabilistic pub quiz for nerds A “true or false” quiz where you respond with your confidence level, and the optimal strategy is to report your true belief. 2020-04-26Time is running out to catch COVID-19 Simulation shows it’s rational to deliberately infect yourself with COVID-19 early on to get treatment, but after healthcare capacity is exceeded, it’s better to avoid infection. Includes interactive parameters and visualizations. 2020-03-14The inception bar: a new phishing method A new phishing technique that displays a fake URL bar in Chrome for mobile. A key innovation is the “scroll jail” that traps the user in a fake browser. 2019-04-27The hacker hype cycle I got started with simple web development, but because enamored with increasingly esoteric programming concepts, leading to a “trough of hipster technologies” before returning to more productive work. 2019-03-23Project C-43: the lost origins of asymmetric crypto Bob invents asymmetric cryptography by playing loud white noise to obscure Alice’s message, which he can cancel out but an eavesdropper cannot. This idea, published in 1944 by Walter Koenig Jr., is the forgotten origin of asymmetric crypto. 2019-02-16How Hacker News stays interesting Hacker News buried my post on conspiracy theories in my family due to overheated discussion, not censorship. Moderation keeps the site focused on interesting technical content. 2019-01-26My parents are Flat-Earthers For decades, my parents have been working up to Flat-Earther beliefs. From Egyptology to Jehovah’s Witnesses to theories that human built the Moon billions of years in the future. Surprisingly, it doesn’t affect their successful lives very much. For me, it’s a fun family pastime. 2019-01-20The dots do matter: how to scam a Gmail user Gmail’s “dots don’t matter” feature lets scammers create an account on, say, Netflix, with your email address but different dots. Results in convincing phishing emails. 2018-04-07The sorry state of OpenSSL usability OpenSSL’s inadequate documentation, confusing key formats, and deprecated interfaces make it difficult to use, despite its importance. 2017-12-02I hate telephones I hate telephones. Some rational reasons: lack of authentication, no spam filtering, forced synchronous communication. But also just a visceral fear. 2017-11-08The Three Ts of Time, Thought and Typing: measuring cost on the web Businesses often tout “free” services, but the real costs come in terms of time, thought, and typing required from users. Reducing these “Three Ts” is key to improving sign-up flows and increasing conversions. 2017-10-26Granddad died today Granddad died. The unspoken practice of death-by-dehydration in the NHS. The Liverpool Care Pathway. Assisted dying in the UK. The importance of planning in end-of-life care. 2017-05-19How do I call a program in C, setting up standard pipes? A C function to create a new process, set up its standard input/output/error pipes, and return a struct containing the process ID and pipe file descriptors. 2017-02-17Your syntax highlighter is wrong Syntax highlighters make value judgments about code. Most highlighters judge that comments are cruft, and try to hide them. Most diff viewers judge that code deletions are bad. 2014-05-11Want to build a fantastic product using LLMs? I work at Granola where we're building the future IDE for knowledge work. Come and work with us! Read more or get in touch!

This page copyright James Fisher 2017. Content is not associated with my employer. Found an error? Edit this page.

Jim FisherCVSpeakingBlogrollRSS TigYog Kickabout