Element <iframe> je samostatný dokument v dokumentu. To má důsledky pro stylování: lze upravovat rámeček samotného prvku, ale nelze přímo stylovat obsah uvnitř (pokud je z jiné domény). Níže je přehled praktických možností, jak rám upravit pomocí CSS.

Co lze a nelze stylovat

Lze: velikost, ořez, rádius, stín, filtry, průhlednost, transformace nebo pointer-events.
Nelze: měnit fonty, barvy nebo rozložení uvnitř načtené stránky z cizí domény. Ty patří obsahu rámu.

Základní stylování prvku

iframe {
  width: 100%;
  height: 450px;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

Responsivní poměr stran

Nejjednodušší je použít aspect-ratio. Výška se dopočítá podle šířky.

.embed {
  max-width: 900px;
}
.embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

Pro starší prohlížeče lze použít obal s relativním pozicováním a poměrovým padding-top:

.embed {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
}
.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

Zaoblení, ořez a stín

border-radius a overflow: hidden umožní čisté zaoblení i pro vnitřní scrollbary.

.frame {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.frame iframe {
  display: block;
  width: 100%;
  height: 400px;
}

Vyplnění celé obrazovky

Pro náhledy, prototypy nebo interní nástroje lze rám roztáhnout přes celé okno.

.iframe-full {
  position: fixed;
  inset: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  border: 0;
  z-index: 1000;
}

Filtry a průhlednost

Na <iframe> lze aplikovat filter nebo opacity. Platí to pro rám jako celek.

.frame-muted { filter: grayscale(1) contrast(.9); }
.frame-dimmed { opacity: .7; }

To je jedna z možností, jak teoreticky rám přebarvit.

Invert: 0% Brightness: 100% Hue-rotate: 0°

Klikatelnost a `pointer-events`

Zakázat klikání do rámu jde přes pointer-events: none.

.iframe-passive { pointer-events: none; }

Scrollbary

Skrytí posuvníku při zachování rolování lze řešit obalem a ořezem. Postup je popsán v samostatném článku:

Jak skrýt posuvník v <iframe>

Zvětšení/zmenšení obsahu

Obsah rámu jde visuálně škálovat pomocí transform: scale. V praxi je vhodné použít obal kvůli ořezu.

.scaled {
  --scale: .9;
  overflow: hidden;
}
.scaled iframe {
  transform: scale(var(--scale));
  transform-origin: 0 0;
  width: calc(100% / var(--scale));
  height: calc(100% / var(--scale));
}

Kompletní konfigurátor

URL

Měřítko: 100%

Invert: 0%

Brightness: 100%

Hue-rotate: 0°

Ořez (px)

Top: 0 px

Right: 0 px

Bottom: 0 px

Left: 0 px

/* CSS se doplní podle nastavení výše */

Alternativní řešení: proxy

Pro plnou kontrolu vzhledu lze stránku načítat přes vlastní proxy na stejné doméně, vložit do ní vlastní styly a do rámu pak načíst už upravenou verzi.

výhody: stejný origin, vlastní CSS/skripty, možnost úprav DOMu
nevýhody: výkon, údržba, právní/licenční aspekty, CSP, přihlášení

Proxy nemusí fungovat pro weby s přísnou CSP (Content Security Policy) nebo vyžadující přihlášení. Vhodné je mít souhlas.

Proxy je i jediné řešení pro weby, které blokují načtení do rámu.

Závěr

Stylování <iframe> se zaměřuje na prvek samotný – velikost, poměr stran, ořez a visuální efekty. Do vnitřního obsahu cizí stránky zasahovat nelze.

Docílit alespoň nějak jde změny barev přes filtry, zmenšení/zvětšení přes scale a případně oříznout okraje.

Stylování HTML elementů – CSS návody a triky

Možnosti stylování <iframe>

Stylování <input type=number>

Různá šířka <input type=number> s min/max

Stylování <input type=range>

Vlastní vzhled scrollbaru

CSS appearance

Stylování <select>u

Vlastní styl bubliny title

Stylovat třídy, nebo elementy?

Vyšší tlačítko ve Firefoxu

Styl odrážkového seznamu

Styl označeného textu

HTML atribut placeholder

Stylování formulářových políček a tlačítek

HTML značka <progress>

Stylování HTML tabulek

Pokročilé stylování checkboxu

Novinky e-mailem

Možnosti stylování `<iframe>`

Stylování `<input type=number>`

Různá šířka `<input type=number>` s `min`/`max`

Stylování `<input type=range>`

CSS `appearance`

Stylování `<select>`u

Vlastní styl bubliny `title`

HTML atribut `placeholder`

HTML značka `<progress>`

Pokročilé stylování `checkbox`u