Responsive Youtube Videosu Oluşturma

Bu yazımda sık sık karşılaştığım responsive youtube videosu sorununun çözümünden bahsedeceğim. Bildiğiniz üzere 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.

Responsive Youtube Videosu Nasıl Yapılır?

Responsive youtube iframe oluşturma yönteminin bir kaç olası çözümü var. Bu çözümleri aşağıda bulabilirsiniz.

Not: Yeni yöntemler ögrendikçe buraya bu yöntemleri ekleyeceğim.

1.Yöntem

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.

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();

Responsive Vimeo Videosu Oluşturma

Yukarıdaki teknik ile responsive Vimeo videosu oluşturabilirsiniz. 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();