Miten luodaan: Responssi Iframe

Opi, miten luodaan responsiivisia iframe:itä CSS:n avulla.

Responssi iframe

Luo iframe, joka säilyttää suhteen (4:3, 16:9 jne.) suurennettaessa:

Mitä on suhde?

Elementin suhde kuvaa sen leveys- ja korkeusprosenttiä. Kaksi yleistä videon suhdetta ovat 4:3 (1900-luvun yleinen videomuoto) ja 16:9 (HD-televisiot ja eurooppalainen digitaalitelevisio sekä YouTube-videot).

Miten - Responssi Iframe

Ensimmäinen vaihe - Lisää HTML:

Käytä konttielementtiä, kuten <div>, ja lisää iframe:si:

<div class="container">
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

Toinen vaihe - Lisää CSS:

lisätään padding-top Lisää prosenttiosuudet säilyttääksesi kontti-divin suhteen. Tässä esimerkissä luodaan 16:9 suhde, joka on YouTube-videoiden oletussuhde.

Esimerkki - 16:9 suhde

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 suhde (9 jaetaan 16:lle saadaan 0.5625) */
{}
/* Tämän jälkeen aseta iframe:n tyyli, jotta se mukautuu täysin korkeuteen ja leveyteen suhteessa konttiasentoon div */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
{}

Try it yourself

Muut suhteet

Esimerkki - 4:3 suhde

.container {
  padding-top: 75%; /* 4:3 suhde */
{}

Try it yourself

Esimerkki - 3:2 suhde

.container {
  padding-top: 66.66%; /* 3:2 suhde */
{}

Try it yourself

Esimerkki - 8:5 suhde

.container {
  padding-top: 62.5%; /* 8:5 suhde */
{}

Try it yourself

Esimerkki - 1:1 suhde (leveys ja korkeus ovat aina yhtä suuret)

.container {
  padding-top: 100%; /* 1:1 aspect ratio */
{}

Try it yourself