Youtube Videolarını Responsive Olarak Sitenize Ekleyin

Günümüz teknolojisinde internet sitelerine artık sadece masa üstü bilgisayarlardan girilmiyor. Tabletler ve akıllı telefonların herkes tarafından kullanılıyor olması sonucunda web sitesi sahiplerinin de bu değişime ayak uydurmaları gerekiyor. Bu değişime ayak uydurabilmek için responsive (duyarlı) temalar geliştirdi. Her an daha da gelişmiş bir responsive tema tasarımcılar tarafından üretilmektedir. Responsive temaların özelliği kullanıcının ekran boyutunu algılayıp tasarımın ekran boyutuna göre yerleşimini sağlar. Farklı ekran boyutlarında site tasarımımız farklı olarak gösterilir.

Farklı ekran boyutlarında site tasarımımızın düzeni değişirken yazılarımız içerisine eklediğimiz videoları da ekran boyutuna göre duyarlı hale getirmek önemli bir ayrıntıdır.

Videolarımıza responsive özelliği vermek için yapmamız gerekenler şunlar;

Blogger Kullanıcıları İçin

Blogger Kontrol Paneli > Şablon > HTML'yi Düzenle diyerek açılan kod sayfasında CTRF+F kombinasyonu ile ]]></b:skin> kodunu aratıp buluyoruz. Bulduğumuz kodun hemen üzerine aşağıdaki kodları yerleştiriyoruz.

.responsive-youtube {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.responsive-youtube iframe,
.responsive-youtube object,
.responsive-youtube embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Daha sonra yazılarımızın içine ekleyeceğimiz youtube embed kodlarını aşağıdaki gibi eklediğimizde yazılarımızın içindeki videolarımız responsive olarak ekran boyutuna göre kendiliğinden boyutlandırılacaktır.

<div class="responsive-youtube"><iframe width="650" height="488" src="//www.youtube.com/embed/U48R5jVxdGI?rel=0" frameborder="0" allowfullscreen></iframe></div>

Wordpress Kullanıcıları İçin

Wordpress kullanıcıları için iki farklı yöntem kullanılarak aynı işlem gerçekleştirilebilir. Bunlardan ilki Blogger kullanıcıları için yapılan işlemin aynısını yapmak. Tek fark Blogger kullanıcılarının ]]></b:skin> kodları arasına yerleştirdiği kodları style.css (farklı bir isimde kullanılabilir) dosyasının içine eklemek. Yazı içinde ise yine aynı şekilde videoları eklemek olacaktır.

İkinci yol olarak; yazdığımız her yazı için aynı div kodunu yazmak yerine ekleyeceğimiz youtube video embed kodları otomatik olarak algılayan bir fonction ile eklediğimiz tüm videoları responsive hale getirebilirsiniz.

Yapmamız gereken tek şey functions.php dosyasını açarak aşağıdaki kodları en alt bölüme yerleştirmek olacaktır.

function responsive_embed($content){
$content = str_replace('<iframe', '<div class="responsive-youtube"><iframe', $content);
$content = str_replace('</iframe>', '</iframe></div>', $content);
return $content;
}
add_filter('the_content', 'responsive_embed');
add_filter('the_excerpt', 'responsive_embed');

Kodları belirtildiği gibi ister blogger isterse de wordpress tabanlı sitemize eklediğimizde youtube videolarımız responsive olarak ekran boyutuna göre boyutlandırılacaktır.