@harrasteblogi JUURI NYT
--:--

Tilaa uutiskirje

Saat tuoreimmat 10 uusinta artikkelia kerran viikossa sähköpostiisi.

Tilaa uutiskirje

WordPress Responsive Embeds käytännössä

20.8.2026 | Artikkeleita, IT, Kotisivut, Nettisivut, Verkkokehitys, Verkkosivut, Verkkotyökalu, WordPress

WordPress
Facebook X WhatsApp

WordPress Responsive Embeds käytännössä

WordPress Responsive Embeds käytännössäUpotettu sisältö on nykyisellä verkkosivustolla lähes arkipäivää. WordPress-sivulle voidaan lisätä YouTube-videoita, karttoja, julkaisuja, kuvia, some-sisältöä ja muita ulkoisia elementtejä ilman, että kaikkea tarvitsee rakentaa käsin.

Ongelma tulee vastaan silloin, kun upotettu sisältö ei mukaudu näytön kokoon.

Pöytäkoneella video näyttää hyvältä, mutta puhelimessa se voi olla liian leveä, aiheuttaa vaakasuuntaisen vierityksen tai rikkoa sivun rakenteen.

Responsive Embeds ratkaisee juuri tämän ongelman: upotetun sisällön pitäisi säilyttää oikea mittasuhde ja mukautua käytettävissä olevaan leveyteen.

Mitä Responsive Embed tarkoittaa?

Responsive embed tarkoittaa tekniikkaa, jossa upotettu sisältö skaalautuu automaattisesti sen ympärillä olevan tilan mukaan.

Esimerkiksi 16:9-video voi olla:

960 × 540 px

pöytäkoneella ja:

360 × 203 px

puhelimella.

Sisällön mittasuhde säilyy, mutta leveys muuttuu laitteen mukaan.

WordPress ja Embed-järjestelmä

WordPressissä upotukset liittyvät oEmbed-järjestelmään ja Embed API:in.

Käyttäjä voi esimerkiksi liittää editoriin YouTube-URL-osoitteen:

https://www.youtube.com/watch?v=example

WordPress voi tunnistaa osoitteen ja muodostaa siitä upotetun sisällön.

Kehittäjän kannalta kiinnostavaa on se, miten tämä sisältö sijoitetaan sivulle ja miten sen responsiivisuus varmistetaan.

Miksi responsive embed on tärkeä?

Responsiivinen upotus vaikuttaa useaan asiaan:

  • mobiilikäyttöön
  • sivuston layoutiin
  • vaakavierityksen välttämiseen
  • käyttökokemukseen
  • saavutettavuuteen
  • suorituskykyyn

Erityisesti videot ja iframe-elementit ovat tavallisia ongelmakohtia.

Iframe on tyypillinen ongelma

Upotettu sisältö näyttää usein HTML:ssä tältä:

<iframe
src=”https://www.youtube.com/embed/example”
width=”560”
height=”315”>
</iframe>

Kiinteät width– ja height-arvot voivat aiheuttaa ongelmia pienillä näytöillä.

Jos iframe on esimerkiksi 560 pikseliä leveä ja puhelimen sisältöalue on vain 390 pikseliä, elementti voi ylittää sivun leveyden.

Moderni CSS-ratkaisu

Nykyisessä CSS:ssä responsiivinen iframe voidaan toteuttaa varsin yksinkertaisesti.

iframe {
max-width: 100%;
height: auto;
}

Pelkkä tämä ei kuitenkaan aina riitä videon oikean kuvasuhteen säilyttämiseen.

Parempi ratkaisu on käyttää aspect-ratio-ominaisuutta.

.embed-container {
width: 100%;
aspect-ratio: 16 / 9;
}
.embed-container iframe {
width: 100%;
height: 100%;
border: 0;
}

HTML:

<div class=”embed-container”>
<iframe
src=”https://www.youtube.com/embed/example”
title=”Video”>
</iframe>
</div>

Tällöin iframe täyttää säiliön ja 16:9-kuvasuhde säilyy.

aspect-ratio on nykyään tärkeä työkalu

Vanhoissa WordPress-teemoissa responsiiviset videot toteutettiin usein CSS:n padding-hackilla.

Nykyään voidaan käyttää suoraan:

aspect-ratio: 16 / 9;

Se tekee koodista selkeämmän ja helpommin ylläpidettävän.

Muita yleisiä kuvasuhteita ovat esimerkiksi:

aspect-ratio: 4 / 3;

ja:

aspect-ratio: 1 / 1;

WordPressin Embed Blocks

Gutenberg-editorissa upotuksia voidaan lisätä Embed Blockien avulla.

Käytössä voi olla esimerkiksi:

  • YouTube
  • Vimeo
  • Spotify
  • SoundCloud
  • X
  • karttapalvelut
  • muita oEmbed-palveluita

WordPress huolehtii osasta rakenteesta automaattisesti, mutta teeman CSS vaikuttaa lopulliseen ulkoasuun.

Siksi responsive embed kannattaa testata aina käytössä olevan teeman kanssa.

WordPressin embed_oembed_html

Jos kehittäjä haluaa muokata oEmbedin muodostamaa HTML:ää, käytettävissä on esimerkiksi:

add_filter(
’embed_oembed_html’,
’my_custom_oembed_html’,
10,
4
);

Tällä voidaan tarvittaessa lisätä oma wrapper-elementti tai muita rakenteellisia muutoksia.

Esimerkiksi:

function my_custom_oembed_html( $html, $url, $attr, $post_id ) {
return ’<div class=”responsive-embed”>’ . $html . ’</div>’;
}

Tämän jälkeen CSS voidaan keskittää wrapperiin.

Kaikkia upotuksia ei kannata käsitellä samalla tavalla

YouTube-video, Instagram-julkaisu ja Google Maps -kartta eivät ole teknisesti samanlaisia.

Niillä voi olla erilaiset:

  • mittasuhteet
  • iframe-rakenteet
  • korkeudet
  • JavaScript-riippuvuudet
  • responsiivisuusvaatimukset

Siksi yksi yleinen CSS-sääntö ei välttämättä ole paras ratkaisu kaikkiin upotuksiin.

Videoiden responsiivisuus

Videoiden yleisin kuvasuhde on 16:9.

Esimerkiksi:

.responsive-video {
width: 100%;
aspect-ratio: 16 / 9;
}
.responsive-video iframe {
width: 100%;
height: 100%;
}

Tämä toimii hyvin tavallisissa video-upotuksissa.

Jos videolähde käyttää muuta kuvasuhdetta, säiliö kannattaa määrittää vastaavasti.

YouTube ja WordPress

YouTube on yksi yleisimmistä WordPressin embed-kohteista.

Responsiivisessa toteutuksessa kannattaa huolehtia siitä, ettei iframe saa kiinteää leveyttä, joka ylittää sisältöalueen.

Esimerkiksi:

.wp-block-embed iframe {
max-width: 100%;
}

Jos teemassa käytetään erityistä wrapper-rakennetta, tarkempi CSS voi olla tarpeen.

Vimeo ja muut videopalvelut

Sama periaate toimii myös esimerkiksi Vimeon kanssa.

Tärkeää ei ole niinkään palvelu vaan HTML-rakenne:

Wrapper → iframe → aspect ratio

Kun tämä rakenne on hallittu, eri videopalveluita voidaan käsitellä yhdenmukaisesti.

Responsive Embeds ja WordPress-teemat

Teeman pitäisi tarjota riittävästi tilaa Embed Blockeille ja muille upotuksille.

Kannattaa tarkistaa erityisesti:

  • content width
  • iframe-leveys
  • wrapperin leveys
  • sivun paddingit
  • mobiilinäkymä
  • overflow-asetukset

Jos teema käyttää esimerkiksi erittäin kapeaa sisältöaluetta, iframe voi näyttää oikealta mutta silti menettää liikaa tilaa.

Älä käytä overflow-x: hidden korjauksena

Yleinen mutta huono ratkaisu on piilottaa vaakasuuntainen ylitys:

body {
overflow-x: hidden;
}

Tämä voi peittää oireen, mutta ei korjaa liian suurta iframe-elementtiä.

Parempi ratkaisu on tehdä itse upotuksesta responsiivinen.

Responsive Embeds ja saavutettavuus

Responsiivisuus ei yksin takaa saavutettavuutta.

Iframeen kannattaa lisätä esimerkiksi kuvaava title:

<iframe
src=”…”
title=”Yrityksen esittelyvideo”>
</iframe>

Upotetun sisällön pitäisi myös olla käytettävissä näppäimistöllä ja toimia mahdollisimman hyvin erilaisilla päätelaitteilla.

Responsive Embeds ja suorituskyky

Responsiivinen iframe ratkaisee layout-ongelmia, mutta se ei automaattisesti tee upotuksesta nopeaa.

Esimerkiksi YouTube-embed voi ladata:

  • JavaScriptiä
  • kuvia
  • iframe-sisältöä
  • muita resursseja

Jos sivulla on useita videoita, vaikutus voi olla merkittävä.

Yksi tehokas ratkaisu on käyttää facade-tekniikkaa, jossa raskas iframe ladataan vasta käyttäjän pyytäessä sitä.

Facade ja lazy loading

Videon tilalle voidaan ensin näyttää kevyt esikatselu.

Esimerkiksi:

Kuva
+
Toistopainike

Kun käyttäjä painaa toistopainiketta, varsinainen iframe ladataan.

Tämä voi vähentää sivun ensimmäisen latauksen kustannuksia huomattavasti.

loading="lazy"

Iframe voidaan myös ladata laiskasti:

<iframe
src=”…”
loading=”lazy”
title=”Video”>
</iframe>

Tämä voi vähentää sellaisten upotusten alkuvaiheen kuormaa, joita käyttäjä ei vielä näe.

Lazy loading ei kuitenkaan korvaa kunnollista embed-arkkitehtuuria.

Responsive Embeds ja Core Web Vitals

Upotettu sisältö voi vaikuttaa myös Core Web Vitals -mittareihin.

Erityisesti layoutin yllättävä muuttuminen on ongelmallista.

Jos iframe saa korkeutensa vasta latauksen jälkeen, sivun sisältö voi hypätä.

aspect-ratio auttaa varaamaan upotukselle tilan jo ennen sisällön latautumista.

Tämä voi vähentää layout shift -ongelmia.

Custom Embed -ratkaisut

Jos WordPress-sivustolla käytetään paljon tietyn palvelun upotuksia, kannattaa harkita omaa Embed-ratkaisua.

Sen avulla voidaan hallita keskitetysti:

  • wrapperia
  • kuvasuhdetta
  • lazy loadingia
  • saavutettavuutta
  • ulkoasua
  • suorituskykyä

Näin jokaisen editoriin lisätyn upotuksen ei tarvitse sisältää omaa CSS-viritystä.

Responsive Embed ja JavaScript

Useimmat tavalliset responsiiviset embed-ratkaisut eivät tarvitse JavaScriptiä.

CSS:

.embed {
width: 100%;
aspect-ratio: 16 / 9;
}

on yleensä parempi kuin JavaScript, joka laskee elementin korkeuden selaimen koon perusteella.

JavaScriptiä kannattaa käyttää vasta silloin, kun upotettu sisältö tarvitsee dynaamista kommunikointia.

Yleisimmät virheet

Responsive Embeds -toteutuksissa nähdään usein samoja ongelmia:

  • iframe käyttää kiinteää leveyttä
  • kuvasuhdetta ei määritetä
  • responsiivisuus tehdään JavaScriptillä ilman tarvetta
  • overflow-x: hidden peittää ongelman
  • iframe aiheuttaa layout shiftin
  • mobiilinäkymää ei testata
  • embed lataa raskaita resursseja heti
  • saavutettavuutta ei huomioida

Useimmiten ongelma voidaan ratkaista melko pienellä määrällä CSS:ää.

Parhaat käytännöt

WordPressin Responsive Embed -toteutuksessa kannattaa:

  • käytä suhteellista leveyttä
  • hyödynnä aspect-ratio-ominaisuutta
  • vältä kiinteitä iframe-leveyksiä
  • anna iframe-elementille kuvaava title
  • käytä loading="lazy" tarvittaessa
  • harkitse facade-ratkaisua raskaille upotuksille
  • varaa upotukselle tila layout shiftin vähentämiseksi
  • testaa mobiili-, tabletti- ja desktop-näkymät
  • käsittele eri embed-tyypit tarvittaessa erillisillä säännöillä

Käytännön perusratkaisu

Monessa WordPress-projektissa hyvä lähtökohta on:

.responsive-embed {
width: 100%;
aspect-ratio: 16 / 9;
}
.responsive-embed iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}

HTML:

<div class=”responsive-embed”>
<iframe
src=”https://www.youtube.com/embed/example”
title=”Esittelyvideo”
loading=”lazy”>
</iframe>
</div>

Tämän jälkeen ratkaisua voidaan laajentaa tarpeen mukaan.

Yhteenveto

WordPressin Responsive Embeds -toteutuksessa tavoitteena on tehdä ulkoisesta sisällöstä osa sivun responsiivista rakennetta ilman, että iframe tai muu embed rikkoo layoutia.

Nykyisessä WordPress-kehityksessä hyvä perusta on yksinkertainen: 100 prosentin leveys, hallittu kuvasuhde ja tarvittaessa lazy loading. CSS:n aspect-ratio tekee tästä huomattavasti helpompaa kuin vanhoissa WordPress-teemoissa käytetyt workaroundit.

Samalla kannattaa muistaa, että responsiivisuus on vain yksi osa kokonaisuutta. Hyvä embed-ratkaisu huomioi myös saavutettavuuden, suorituskyvyn, Core Web Vitals -mittarit ja ulkoisen sisällön tietoturvan.

🤖 Tämä sisältö on tuotettu tekoälyn avulla. Tarkista tiedot alkuperäisistä lähteistä ennen niiden hyödyntämistä.
Facebook X WhatsApp

Aiheeseen liittyvät artikkelit

8
🍪