Web Site için Responsive Video Yapma

Web Site için Responsive Video Yapma

Web sitenize eklediğiniz videolar tasarımınıza ayak uydursun istiyorsanız size vereceğimiz kodları uygulayarak bunu gerçekleştirebilirsiniz. Duyarlı Web sitelerin en büyük sorunu siteye sonradan eklenen multimedya araçlarıdır. Siteye eklediğiniz videoların büyüklüğü sabit kaldığı zaman mobil görünümde problem olacaktır. Tasarladığınız temanın çözünürlüğe ayak uydurması kadar eklediğiniz araçlarında çözünürlüğe uyması önemli buna videolarda dahil. Özellikle Video paylaşım sitesi yada film sitesi sahibiyseniz videoları responsive yapmanız gerekiyor. Buun için kullanmanız gereken kodlar şu şekildedir.

Videoları Çözünürlüğe Duyarlı Hale Getirme

Stil Kodları:

<style>
.videoboyut { position: relative; padding-bottom: 50%; height: 0; overflow: hidden; max-width: 100%; } 
.videoboyut iframe, .videoboyut object, .videoboyut embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>

İçerik Kodları:

<div class='videoboyut'>
<iframe src='https://www.youtube.com/embed/9bZkp7q19f0' frameborder='0' allowfullscreen></iframe>
</div>

Stil kodlarını Web sitenizin style.css dosyanızın içine kopyalayıp kaydedin, içerik kodlarını ise videonuzu göstermek istediğiniz bölüme eklemelisiniz. biz örnek bir gösterim yaptık, sitenizin video bölümünü buradaki kodlara göre uyarlamanız yeterlidir.

Facebook'ta Paylaş
Whatsapp'ta Paylaş
Facebook'ta Paylaş
Whatsapp'ta Paylaş
Yorumlar

Yorumunuzu Yazın

E-posta adresiniz yayınlanmayacaktır.


Son Yorumlar

  • Silver:Zaten hayatimizda tonlarca sifre var b.k var gibi ...
  • Anonim:Android mi Sürümü kaç...
  • Osman:Bu bilgiyi arıyordum. 5 blogumu da diğer maile dev...
  • Gözde:Lütfen yardımcı olun gozde.2811@hotmail .com bu ad...
  • Gzde:Bana ulaşabilir misiniz? Lütfen silinen facemi tek...
  • obedeay:instagramda fotoğraf lar üzerine nasıl link ekleni...
  • Volkan aras:Whatsapp üzerinden yazbilirmisiniz azerbaycandayım...
  • Davut Selek:Lütfen kapatılan Facebook hesabımın tekrar açılmas...
  • Davut Selek:Herkese kapalı olan gereksiz adlı bir sayfamda yas...

Sponsorlarımız

Minecraft Apk indir