OneTaskBy Tim King · Updated
Responsive Iframe Generator
Responsive Embed Code for Video and Maps
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Responsive Iframe Generator works
A responsive iframe fills the width of its container and keeps its shape, so an embedded video or map never overflows on a phone or leaves black bars on a desktop. Paste a link or the embed code, pick the aspect ratio, and copy the HTML and CSS.
An iframe has a fixed width and height by default, so a 560 by 315 video embed pokes out of a
narrow phone screen. Setting width: 100% alone fixes the width but leaves the height fixed, which
squashes the video. The fix is a wrapper that holds the ratio and an iframe that fills the wrapper.
How the responsive iframe CSS works
With the aspect-ratio method, the wrapper gets aspect-ratio: 16 / 9 and the iframe is set to
100% width and height, so the browser works out the height from the width. The padding-top
fallback does the same job for very old browsers: a pseudo-element with padding-top: 56.25%
props the wrapper open, because percentage padding is measured against the width, and the iframe
is positioned absolutely on top of it.
What the generator does with your link
YouTube watch, Shorts, live and youtu.be links are turned into the /embed/ address, and Vimeo
page links into the player address. Paste a full embed code instead and the generator takes its
src, and can read the ratio from its width and height. Any other https address, such as a
Google Maps or Spotify embed URL, is used as it is.
FAQ
Why does my responsive YouTube embed show an error?
YouTube now checks the referrer of embedded players and can refuse to play without one. The
generated iframe includes referrerpolicy="strict-origin-when-cross-origin", which sends your
site's origin. Some videos also have embedding switched off by their owner, which no code can fix.
What does YouTube privacy-enhanced mode do?
It uses the youtube-nocookie.com domain, which does not store YouTube cookies on the visitor's
device until they press play. The player looks and works the same, so it is a sensible default
for sites that need cookie consent.
Should I use aspect-ratio or the padding-top fallback?
Use aspect-ratio. It is supported by every current browser, including Safari since version 15,
and the CSS is shorter. The padding-top method is only worth it if you must support browsers from
before 2021.
Does lazy loading work on iframes?
Yes. loading="lazy" on an iframe tells Chrome, Edge, Firefox and Safari to wait until the embed
is near the screen before loading it. A video player far down the page then costs nothing on the
first load, which helps page speed scores.
See also: all Layout & Spacing tools, Shadows & Motion, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Aspect Ratio
Aspect-ratio CSS plus the padding-top percentage fallback.
Audio Embed Code Generator
Build an HTML5 audio tag with the right MIME types and options.
YouTube Thumbnail Maker
Make a 1280×720 YouTube thumbnail with big outlined text. No watermark, no upload.
Video Frame Capture
Save a still frame from a video at any timestamp.
HTML Validator
Find unclosed tags, duplicate ids and bad nesting in pasted HTML.