Responsive Youtube Videosu Oluşturma

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.

<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

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:
  1. 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.
  2. Eski içeriklerinizde videolarınız varsa bunların tek tek düzenlenip kapsayıcı div içerisine alınması gerekir.
  3. 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.

Bu sınırlamalardan herhangi biri sizin için geçerliyse, bir JavaScript çözümü düşünebilirsiniz. Sayfa yüklendiğinde veya sayfanın genişliği değiştiğinde sayfadaki tüm videolar en boy oranını korumak için yeniden boyutlandırılır.

// Tüm YouTube videolarını bul
var $allVideos = $("iframe[src^='//www.youtube.com']"),
$fluidEl = $("body");
// Her video için en boy oranını belirler ve kaydeder
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// sabit değer olarak varsa yükseklik ve genişliği kaldır
.removeAttr('height')
.removeAttr('width');
});
// Pencere yeniden boyutlandırıldığında çalıştır
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Tüm videoları kendi en boy oranlarına göre yeniden boyutlandır
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
}).resize();

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
var $allVideos = $("iframe[src^='//player.vimeo.com'], iframe[src^='//www.youtube.com']"),
$fluidEl = $("body");
// Her video için en boy oranını belirler ve kaydeder
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// sabit değer olarak varsa yükseklik ve genişliği kaldır
.removeAttr('height')
.removeAttr('width');
});
// Pencere yeniden boyutlandırıldığında çalıştır
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Tüm videoları kendi en boy oranlarına göre yeniden boyutlandır
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
}).resize();

Merhaba! Ben Burak. 2016 yılında Karadeniz Teknik Üniversitesi Harita Mühendisliği Bölümü’nden mezun oldum. Lise yıllarında HTML & CSS‘e, Üniversite yıllarında WordPress ve Matlab‘e adım attım. Lisans tezimi Matlab üzerinden program yazarak teslim ettim. Çeşitli projeler için WordPress tabanlı yazılımlar geliştirdim.

Bir Cevap Yazın

This site uses Akismet to reduce spam. Learn how your comment data is processed.