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.

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:

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

/* 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.