• 7

Youtube Videolarını Blogunuza Responsive Olarak Ekleyin

Responsive temalar artık günümüzde çok sık kullanılır oldu. Bunun en temel sebebi de temanın tüm çözünürlüklerde sorunsuz bir şekilde çalışması. Mobil kullanımın ne derece arttığını düşünürsek en çok da blogumuzun mobil platformlarda sorunsuz bir şekilde gözükmesini isteriz. Bunun için eklentiler bulunsa da responsive tema kullanmak daha iyi olacaktır.

Responsive Youtube Video

Ben de bu blogda responsive bir tema kullanıyorum. Hazırlamış olduğum bir videoyu Youtube’a yükleyip embed kodu alarak buradaki yazımın içinde paylaşmak istedim. Videoyu yazıya ekleyip yazıyı paylaştıktan sonra telefonumdan bloguma girdim ve eklediğim videonun responsive olarak gözükmediğini gördüm. Kısa bir araştırmadan sonra John Surdakowski adlı arkadaşımızın yazısına denk geldim. Kodu da denedikten sonra güzelce çalıştığını gördüm ve sizlerle paylaşmak istedim.

Yapacağımız işlemler çok basit. Öncelikle style.css dosyamızı açalım ve en alta aşağıdaki kodları ekleyelim.

Bu kodları ekledikten sonra hangi videomuzun responsive olmasını istiyorsak aşağıdaki şekilde div içine alalım.

Hepsi bu kadar.

Youtube Videolarını Otomatik Tespit Etme

Peki her embed kodunu div içine almak zorunda mıyız? Kendi otomatik algılasa olmuyor mu? Tabi ki olur. Bunun çözümünü sunan Berkay kardeşime de teşekkür ederim. Eğer dediğim şekilde kendi videoları otomatik algılasın istiyorsanız functions.php dosyasını açıp aşağıdaki kodları ekleyelim.

Eğer bu şekilde yaparsanız normal olarak Youtube embed kodunu ekleyip paylaştığınızda videonuz responsive olacaktır.

Örnek Kullanım

Bunlar da ilginizi çekebilir...

  • 7 Yorum
  1. Gravatar Abdulbasit Hocaoğlu dedi ki:

    Bunun bir de çevresine 1px ölçekli 10px mesafeli border eklesek tadından yenmez, css ile nasıl yapılır? ben yaptığımda border videoyla iç içe giriyor. Bunu konuya eklerseniz sevinirim, kolay gelsin.

    • Gravatar Usluer dedi ki:

      width değerini 95% yapıp height değerini de 92% yaparsanız ve border: 1px solid #000; padding: 10px; değerlerini eklerseniz sorun çözülmüş olur.

  2. Gravatar tuncay dedi ki:

    Çok iyi

  3. Gravatar Fatih dedi ki:

    teşekkürler

  4. Gravatar Nurettin KAYA dedi ki:

    Çok faydalı bir bilgi, beğendim doğrusu. Kaynak göstererek paylaşabilir miyim?

  5. Gravatar Faruk Yaman dedi ki:

    Çok teşekkür ederim ismail kardeşim bu sıralar ihtiyacım olan bir konuydu çok memnun kaldım yazıdan. Eyvallah! :)

Bir Cevap Yazın

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