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

  • Zehra:Merhabalar benim telefonum format oldu YouTube kan...
  • Muhammed polat:Sizde varmı bu fotoğraf makineden almak istiyorum...
  • Muhammed polat:Nereden aldınız acaba bilgi verebilir misiniz yada...
  • Nurcan:Hesabimi sildim şimdi geri alamıyorum...
  • Mahmut KüRDÜ:Hesabımın tekrar açılmasını rica ediyorum lütfen ç...
  • efe:bazı filmleri otomatik almıyor. diyelim 300 filmin...