WordPress’te Youtube Videolarını Responsive Yapma

Bilindiği üzere google artık masaüstü görünüme önem verdiği kadar mobil platformlar için yapılan çalışmaları da önemsiyor. Bu nedenle responsive tasarımlar büyük bir önem taşıyor. Mobil platformlar için yapılacak olan her türü geliştirme google tarafından sitenizin bir adım öne çıkarılmasını sağlayacaktır. Sadece tasarım yönünden değil sürekli olarak sabit ölçülerden kalan youtube videolarının responsive hale getirilmesi de siteniz için olumlu özelliklerden birisi olacaktır. Eğer youtube videolarını responsive hale getirmeyi bilmiyorsanız bu konuda sizlere yardımcı olacağız..

Dünyanın en çok ziyaret edilen video paylaşım platformu Youtube üzerinden herhangi bir videoyu paylaştığınızda bu videonun ekran özellikleri sabit kalmaktadır. Videonun mobil tasarımlarda farklı ölçülerde izlenebilmesi hem google gözünde ön plana çıkmanızı hem de kullanıcının kolay bir şekilde videoyu seyredebilmesini sağlar. Bu nedenle videoların responsive desteği ile kullanıcılara izletilmesi en mantıklı yol olacaktır. Eğer video embed kodlarınız otomatik olarak responsive olmuyorsa şu yöntemi denemelisiniz.

Tema dosyalarınız arasından style.css dosyasını açın ve en alt kısma şu kodları ekleyin;

.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 ise functions.php dosyanızı açarak yine en alta aşağıdaki kodları ilave edin.

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

iki işlemi yaptıktan sonra kaydet butonuna basın ve değişiklikleri kendi gözünüzle görün. Artık mobil platformlarda ekran büyüklüğü ne ise yazı içindeki videolarınız o büyüklük ile eş değerlere gelecek. Böylece ziyaretçileriniz videoları dilediği şekilde izleyebilecek. Eğer ekran yan çevrilmişse buna göre boyutu değişerek kullanıcıya kolaylık sağlayacak olan bu kodlar aynı zamanda tam ekran özelliğini kullanmadan videonun ekranın tamamına sığmasını sağlayacaktır.

Yapılan bu işlem kullanmış olduğunuz bütün tasarımlar için geçerli olacaktır. Eğer ilerleyen süreçte tema değişikliğine giderseniz videolarınız yine responsive olarak çalışmaya devam edecek ve kullanıcılarınız bu özellikten faydalanabilecektir. Videolarınızın responsive tasarım ile uyumlu olması sizin için önemli bir gelişim olacaktır. Herkesin bu işlemi yapmasını tavsiye ediyoruz.


Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

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