Merhaba arkadaşlar, bugün sizlere eski bir dostumuz olan, ama hala canlı yayınlarda, video gömülerinde başımı kurtaran bir CSS tekniğinden bahsedeceğim. aspect-ratio property'si hayatımıza gireli bir süre oldu, tarayıcı desteği de artık çok iyi. Ama bir gün, bir müşterinin eski bir projesinde, desteklenmeyen bir tarayıcıda (adını vermeyeyim ama IE'den hallice bir şey) video konteynerlerinin patladığını gördüm. Tüm oranlar bozulmuş, iframe'ler birbirine girmiş. İşte o an, unutulmaz padding hack tekniği aklıma geldi ve beni kurtardı.
Neden aspect-ratio Değil de Bu Hack?
aspect-ratio gerçekten çok şık ve temiz bir çözüm. Doğrudan en-boy oranını yazıyorsunuz, o kadar. Ancak, eski projelerde veya belirli bir tarayıcı desteği zorunluluğunuz olduğunda, bu property işe yaramayabiliyor. İşte burada devreye, CSS'in çok temel bir özelliği olan padding'in yüzde değerlerinin, her zaman üst elemanın genişliğine göre hesaplanması prensibi giriyor. Bu sihirli bilgiyi kullanarak, bir kutuya sabit bir en-boy oranı verebiliyoruz.
Sihirli Formül: Padding-Bottom'un Gücü
Tekniğin özü şu: Bir konteyner oluşturuyoruz, içine videomuzu/iframe'imizi absolute pozisyonla yerleştiriyoruz. Konteynerin yüksekliğini sıfırlıyoruz ve yükseklik yerine padding-bottom (veya padding-top) kullanıyoruz. Peki bu padding yüzdesi ne olacak? İstediğimiz en-boy oranına göre şu formülü uyguluyoruz:
(Yükseklik / Genişlik) 100%
Örneğin, klasik 16:9 oranı için: (9 / 16) 100 = 56.25%
4:3 oranı için ise: (3 / 4) 100 = 75%
Uygulama Zamanı: Kod Örnekleri
Hadi bu teoriyi pratiğe dökelim. Diyelim ki sayfamıza 16:9 oranında responsive bir YouTube videosu gömücez.
İlk olarak, HTML yapımız:
Şimdi de bu wrapper'ı sihirli padding-bottom'umuzla şekillendirelim:
İşte bu kadar! Artık `.video-wrapper` div'inin genişliği ne olursa olsun (ister mobilde 320px, ister masaüstünde 1200px), padding-bottom değeri ona göre hesaplanacak ve iframe'imiz mükemmel 16:9 oranını koruyacak. Bu tekniği her türlü embed (Vimeo, haritalar) veya sadece `<video>` etiketleri için de kullanabilirsiniz.
Son Sözler ve Sorum
Bu teknik, CSS'in derinliklerinden gelen, tarayıcı uyumluluğu %99.99 olan bir çözüm. aspect-ratio hayatımızı kolaylaştırsa da, bazen bu gibi eski ve sağlam hileler projeleri kurtarıyor. Ben hala bazı durumlarda, özellikle çok eski sistemlerle uğraşırken bu yönteme başvuruyorum.
Peki siz bu tarz responsive embed sorunlarını nasıl çözüyorsunuz? Hiç aspect-ratio ile ilgili tarayıcı uyumsuzluğu yaşadınız mı, yoksa artık o property'ye güvenip bu hack'i tamamen rafa mı kaldırdınız? Yorumlarda deneyimlerinizi paylaşın, konuşalım!
Neden aspect-ratio Değil de Bu Hack?aspect-ratio gerçekten çok şık ve temiz bir çözüm. Doğrudan en-boy oranını yazıyorsunuz, o kadar. Ancak, eski projelerde veya belirli bir tarayıcı desteği zorunluluğunuz olduğunda, bu property işe yaramayabiliyor. İşte burada devreye, CSS'in çok temel bir özelliği olan padding'in yüzde değerlerinin, her zaman üst elemanın genişliğine göre hesaplanması prensibi giriyor. Bu sihirli bilgiyi kullanarak, bir kutuya sabit bir en-boy oranı verebiliyoruz.
Sihirli Formül: Padding-Bottom'un GücüTekniğin özü şu: Bir konteyner oluşturuyoruz, içine videomuzu/iframe'imizi absolute pozisyonla yerleştiriyoruz. Konteynerin yüksekliğini sıfırlıyoruz ve yükseklik yerine padding-bottom (veya padding-top) kullanıyoruz. Peki bu padding yüzdesi ne olacak? İstediğimiz en-boy oranına göre şu formülü uyguluyoruz:
(Yükseklik / Genişlik) 100%
Örneğin, klasik 16:9 oranı için: (9 / 16) 100 = 56.25%
4:3 oranı için ise: (3 / 4) 100 = 75%
Uygulama Zamanı: Kod ÖrnekleriHadi bu teoriyi pratiğe dökelim. Diyelim ki sayfamıza 16:9 oranında responsive bir YouTube videosu gömücez.
İlk olarak, HTML yapımız:
HTML:
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</div>Şimdi de bu wrapper'ı sihirli padding-bottom'umuzla şekillendirelim:
CSS:
.video-wrapper {
position: relative;
width: 100%; / Konteyner genişliği her zaman %100 /
height: 0; / Yüksekliği sıfırlıyoruz, asıl yüksekliği padding belirleyecek /
padding-bottom: 56.25%; / 16:9 Oranının sihirli sayısı! /
overflow: hidden; / Taşanları gizle /
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}İşte bu kadar! Artık `.video-wrapper` div'inin genişliği ne olursa olsun (ister mobilde 320px, ister masaüstünde 1200px), padding-bottom değeri ona göre hesaplanacak ve iframe'imiz mükemmel 16:9 oranını koruyacak. Bu tekniği her türlü embed (Vimeo, haritalar) veya sadece `<video>` etiketleri için de kullanabilirsiniz.
Son Sözler ve SorumBu teknik, CSS'in derinliklerinden gelen, tarayıcı uyumluluğu %99.99 olan bir çözüm. aspect-ratio hayatımızı kolaylaştırsa da, bazen bu gibi eski ve sağlam hileler projeleri kurtarıyor. Ben hala bazı durumlarda, özellikle çok eski sistemlerle uğraşırken bu yönteme başvuruyorum.
Peki siz bu tarz responsive embed sorunlarını nasıl çözüyorsunuz? Hiç aspect-ratio ile ilgili tarayıcı uyumsuzluğu yaşadınız mı, yoksa artık o property'ye güvenip bu hack'i tamamen rafa mı kaldırdınız? Yorumlarda deneyimlerinizi paylaşın, konuşalım!