WordPress'de Youtube Videolarına Responsive Özelliği Kazandırma

Bildiğiniz gibi responsive temalar günümüzde oldukça popüler durumda. Yazı ve resim içeriğinin aksine birçok temada videolarda responsive özelliğini kullanamıyoruz. Bu sorunun çözümü aslında oldukça basit. İster eklenti yardımıyla, ister eklentilerle uğraşmadan temanın stil ve fonksiyon dosyalarına yapılacak ufak eklemelerle videolarınıza otomatik olarak responsive özelliği kazandırabilirsiniz.

CSS

İlk olarak temamızın style.css dosyasını açıp, aşağıdaki stil kodlarını yazalım.

.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%;
}

HTML (Manuel)

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>

Videoları Otomatik Tespit Etme

Yukarıdaki gibi her videoyu div içine alarak manuel olarak kullanmak istemiyorsanız bununda bir çözümü var. Temamızı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. Tek yapmanız gereken temanızın functions.php dosyasını açıp, aşağıdaki kodu eklemeniz.

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

Bu işlemler sonrasında blogunuza eklediğiniz videolara otomatik olarak responsive özelliği kazandırılacaktır…