Bloggerda / WordPress’de Youtube Videolarını Responsive Yapma

Bu yazıda youtube’da ki bir video’yu web sitemize mobil uyumlu olarak, esnek olarak eklemeyi göstereceğim. Yani responsive yapacağız.

Youtube videolarını zaten yukarıdaki gibi embed kodlarını alarak sitemize ekleyebiliyoruz.  Şimdi bu kod üzerinde küçük bir değişiklik yapalım.

<iframe width="560" height="315" src="https://www.youtube.com/embed/_-zOiBiJ4_8" frameborder="0" allowfullscreen></iframe>

Bu, bize youtube’un verdiği standart embed kodu. Kod içerinde görebileceğimiz gibi, youtube videoların genişliğini standart olarak 560px yapıyor. Bizim yapmamız gereken genişliğin, cihaza göre şekillenmesini sağlamak. Bu yüzden, kod üzerinde yer alan width=”560″ kodunu  width=”100%” şeklinde değiştiriyoruz. 560 yazan yeri 100% yaptığımız zaman videonun genişliği cihaza göre değişkenlik gösterecektir.

Bunu yükseklik için yapmamıza gerek yok. Bizim derdimiz genişliği responsive yapmaktı. Eğer yüksekliğide responsive yapmaya kalkarsak ekranda videodan başka birşey göremeyiz. Bunuda istemeyiz ^^.

Bu yöntemi yalnızca youtube videoları için değil, bütün videolar için uygulayabiliriz.

Bir Cevap Yazın

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