Responsive Youtube Videosu Oluşturma - Burak Şahin
Iframe kodlarında sadece genişliği 100% vermek img kodlarında ki gibi doğru çalışmıyor. Iframe’de bir yüksekliğin ayarlanması gerekiyor yoksa tarayıcılar iframe’i 150px sabit bir yükseklikte oluşturuyor. Responsive youtube videosu oluşturma konusuyla ile ilgili makalemde bu durumu düzeltmeyi anlatacağım.
Aşağıdaki videoda olduğu gibi iframe’in yüksekliğinin otomatik olarak 150px gelmesi kötü bir görüntü oluşturuyor.
Neyse ki burada birkaç olası çözüm var. Bunlardan biri Thierry Koblentz tarafından öncülük edilmiş ve 2009 yılında A List’te sunulmuş olan “Video için İçsel Oranlar Oluşturma (Creating Intrinsic Ratios for Video)” tekniğidir. Bu teknikle, iframe kodunu bir en-boy oranına sahip bir divin içine ekleyin, sonra videoya position: absolute; kodu ekleyerek bunun içinde konumlandırın. Bu bize güvenebileceğimiz makul bir yükseklik ve genişlik verir.
Yukarıdaki kodlar ile .videoWrapper’ın içerisindeki iframe videosu 16:9 boyutunda orantılı bir şekilde görünecektir.
Yukarıdaki teknik harika, ancak birkaç olası sınırlaması var:
Kapsayıcı dive ihtiyaç duyar, bu nedenle sadece kopyala yapıştır yeterli olmayacaktır. Kullanıcıların kapsayıcı div konusunda biraz daha anlayışlı olması gerekir.
Eski içeriklerinizde videolarınız varsa bunların tek tek düzenlenip kapsayıcı div içerisine alınması gerekir.
Tüm videolar aynı en boy (16:9) oranına sahip olmalıdır. Aksi takdirde videonun alt-üst veya sağ-sol bölümlerinde siyah bir zemin oluşur. Ya da, ek bir sınıf (class) oluşturup farklı oranlara uygun css yazmanız gerekecektir.
// Tüm YouTube videolarını bul
// Her video için en boy oranını belirler ve kaydeder
// sabit değer olarak varsa yükseklik ve genişliği kaldır
// Pencere yeniden boyutlandırıldığında çalıştır
// Tüm videoları kendi en boy oranlarına göre yeniden boyutlandır
Vimeo Video Desteği Ekleme
Yukarıdaki teknik Vimeo iframe kodlarında da kullanılabilir. HTML/CSS kodlarında hiç bir değişiklik gerektirmez, sadece jQuery kodunda tek bir satırı değiştirerek Vimeo desteği eklenebilir:
var $allVideos = $("iframe[src^='//player.vimeo.com'], iframe[src^='//www.youtube.com']"),
Vimeo ve Youtube desteği eklenmiş jQuery kodunun tam hali aşağıdaki gibidir:
// Tüm YouTube ve Vimeo videolarını bul
responsive iframeresponsive youtube iframeresponsive youtube videosuyoutube videosunu responsive yapma
2018'in En İyi 5 WordPress Restoran Teması
Bitcoin'in Nabzı Burada Atıyor
CSS ile Contact Form 7 Düzenleme
CSS İle Açılır Liste Düzenleme // Drop-Down List
CSS İle Sosyal Medya Butonu
W3C Hataları ve Çözümleri için Ali