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

  • Kbrkyn:Bana yardımcı olabilirmisiniz bundan 5 yıl önce fa...
  • gülay:7542 arıyorum şifre istiyo ben bi şifre koymadım n...
  • Fatoş Çiçek:2 tane face hesabımı sildim ama açmak istiyorum LÜ...
  • admin:Merhaba, 555 entegresinin 1. Ayağının altındaki se...
  • Ferhat..:Merhaba. Bu devrenin artı kısmını gördüm fakat eks...
  • şevki:Maalesef bir şeyler ters gitti. Yüksek eğitimli...
  • admin:Yazılımı kullanmayı denediniz mi?...
  • Bulent:Merhaba chkdsk F:/r raw için işe yaramıyor....

Sponsorlarımız

Minecraft Apk indir