Wordpress alt yapısına sahip sitelerde karşılaştığımız sıkıntılardan biri de Responsive özelliği ile ilgilidir. Son zamanlarda yapılan siteler genelde Responsive özelliği bulunmaktadır. Fakat bazı sitelerde veya kullanılan temalarda yazı ve resimlerde olabiliyor; videolarda olmayabiliyor. Sizlere youtube videoları hakkında nasıl responsive özelliği kazandıracağımızı anlatmaya çalışacağım.
Bu işlem için wordpress eklentisi de kullanabilirsiniz. Bunun için İnternet'te ufak bir arama ile istediğiniz gibi eklenti bulabilirsiniz. Ben sizlere eklenti kullanmadan kullandığımız temanın stil ve fonksiyon dosyalarına eklemeler ile nasıl yapılabilir göstereceğim. Neden mi eklentileri ne kadar yüklersen sistem ağırlaşmaya başlar.
İlk önce kullandığımız temamızın style.css dosyasını açıp, aşağıdaki stil kodlarını ekleyelim.
.video-responsive {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Eğer HTML kullanarak videolarınıza responsive özelliği kazandırmak istiyorsanız videonun iframe kodunu div içine kullanabilirsiniz.
<div class="video-responsive">
<iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div
Hayır her videoyu div içine alarak kullanmak istemiyorum diyorsanız kullandığınız temanın functions.php dosyasına yapacağımız ufak bir ekleme ile videolarınız otomatik olarak tanınacak ve herhangi bir işlem yapmaya gerek kalmadan responsive özelliği kazanacaktı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');
İşte hepsi bu kadar. Artık videolarımız eğer responsive özelliği yoksa özellikle youtube videolarında bu şekilde responsive özelliği otomatik olarak kazandırabiliriz.
Umarım faydalı olmuştur. Görüş ve önerilerinizi yorum bölümünde bekliyorum.
