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.