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

  • Kadir:Hocam vardır bir çözümü derken sizi buldum, çok te...
  • erhan:makale için faydalandım.teşekkürler......
  • ybk:güzel açıklanmış...
  • Seckin taş:İki feisburk hesabım var öncekine nasıl dönüş yapa...
  • inci alp:çok teşekkürler, o kadar kolay hallettim ki ben bi...
  • sabri bulut:harddiski çıkar sonra açma düymesine bas ps2 nin s...
  • admin:Hata nedir? Biraz bilgi verir misiniz?...
  • fatih incegöz:Windows 10 çalışmıyor lütfen yardım edermisiniz...
  • seyhmus:banada yardımcı olabilirmisin...
  • seyhmus:bnde aynı dertten muzdaribim yardımcı olabilirmisi...

Sponsorlarımız

Minecraft Apk indir