Nasıl oluşturulur: Yanıtlayıcı Iframe

CSS kullanarak yanıtlayıcı iframe nasıl oluşturulurunu öğrenin.

Yanıtlayıcı iframe

Genişlik-yükseklik oranı (4:3, 16:9 vb.) koruyarak iframe oluşturma:

Genişlik-yükseklik oranı nedir?

Bir elemanın genişlik-yükseklik oranı, genişliği ve yüksekliği arasındaki oran ilişkisini tanımlar. İki yaygın video genişlik-yükseklik oranı 4:3 (20. yüzyılın genel video formatı) ve 16:9 (yüksek çözünürlüklü televizyon ve Avrupa dijital televizyonu ile YouTube videolarının genel formatı)'dır.

How To - Yanıtlayıcı Iframe

İlk adım - HTML ekleyin:

Div gibi bir konteyner elementi kullanarak ve içinde iframe ekleyin:

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

İkinci adım - CSS ekleyin:

için padding-top Div'in genişlik-yükseklik oranını korumak için yüzdelik değer ekleyin. Aşağıdaki örnek, YouTube videolarının varsayılan genişlik-yükseklik oranını olan 16:9 genişlik-yükseklik oranında bir div oluşturur.

Örnek - 16:9 genişlik-yükseklik oranı

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 genişlik-yükseklik oranı (9/16 = 0.5625) */
}
/* iframe'in tarayıcıda tam yükseklik ve genişlikte görüntülenmesini sağlamak için tarayıcıda stil ayarları yap */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

Kişisel Olarak Deneyin

Diğer genişlik-yükseklik oranları

Örnek - 4:3 genişlik-yükseklik oranı

.container {
  padding-top: 75%; /* 4:3 genişlik-yükseklik oranı */
}

Kişisel Olarak Deneyin

Örnek - 3:2 genişlik-yükseklik oranı

.container {
  padding-top: 66.66%; /* 3:2 genişlik-yükseklik oranı */
}

Kişisel Olarak Deneyin

Örnek - 8:5 genişlik-yükseklik oranı

.container {
  padding-top: 62.5%; /* 8:5 genişlik-yükseklik oranı */
}

Kişisel Olarak Deneyin

Örnek - 1:1 genişlik-yükseklik oranı (yükseklik ve genişlik her zaman eşittir)

.container {
  padding-top: 100%; /* 1:1 Genişlik-Yükseklik Oranı */
}

Kişisel Olarak Deneyin