Mobil uyumlu Youtube videoları göstermek (responsive)


Bu yazı Webmaster kategorisine , 4 Ağustos 2015 tarihinde admin tarafından eklendi.

Web sitenizde youtube videoları gösteriyorsanız ve video kodlarını mobile ve tablet uyumlu hale getirmek istiyorsanız bu kod işinizi görecektir.

Google arama motorunun site aramalarında mobil uyumlu siteleri tercih etmesinden bu yana sitelerini mobile uyumlu hale getirenler videoları mobil uyumlu hale getirmekte zorlanıyorlar.

Size vereceğim kod ile Youtube , Vimeo , Dailymotion gibi video sitelerinden aldığınız iframe , embed kodlarını sitenizde mobil uyumlu gösterebileceksiniz.

Öncelikle style.css dosayımıza ekleyeceğimiz kodları vereyim .Aşağıdaki kodları css dosyanıza ekleyin.

.video-container {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Daha sonra Youtube den yada yada herhangi bir video sitesinden aldığınız iframe kodunu aşağıdaki şekilde ekleyin.

<div class="video-container"><iframe src="http://www.youtube.com/embed/gLax8GSuFwc" width="560" height="315" frameborder="0"></iframe></div>

Artık sitenizde ziyaretçiler cihazları ne olursa olsun mobil , tablet yada laptop farketmez. Videoları mobil uyumlu izleyecekler.

Etiketler : , , , ,


Benzer Yazılar

Php ile rastgele sözler

22 Nisan 2015

Php dosya (sunucu) yolunu ekrana yazdırmak

12 Nisan 2015

Php ile bulunduğun klasörün adını almak

12 Nisan 2015

Youtube adresinden video bilgilerini alma scripti fonksiyonu

12 Nisan 2015

Youtube id den sayfa başlığını almak

12 Nisan 2015

Bir cevap yazın

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