Bir videoyu siteye yerleştirdiğinizde, kodda genellikle çerçeve boyutu belirtilir. Bu durumda ekran çözünürlüğü değiştiğinde, video farklı cihazlarda ekran boyutuna göre otomatik olarak ayarlanmaz; video, video platformunda olduğu sabit boyutuyla görüntülenir.
Amacımız, sayfa boyutu değiştiğinde video çerçevesinin de otomatik olarak boyutunu değiştirmesini sağlamaktır. Böylece siteyi farklı cihazlardan açtığınızda video ekran boyutuna göre ayarlanacaktır.
Bu kılavuz YouTube hizmeti ve MediaCMS uygulaması ile test edilmiştir.
Varsayılan olarak aşağıdaki gibi bir bağlantı elde edersiniz:
<iframe width="560" height="315" src="https://synay.dev/embed?m=d0xUIusUo" frameborder="0" allowfullscreen></iframe>
Videonun otomatik olarak ayarlanması için bu kodu şu hale getirelim:
<div class="container">
<iframe src="https://synay.dev/embed?m=d0xUIusUo"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
Gördüğünüz gibi sabit boyutları kaldırdık ve iki CSS sınıfı ekledik: container ve video.
Şimdi bu sınıfları site stil dosyamıza ekleyelim:
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Konteyner elemana sıfır yükseklik ve yüzde olarak bir alt boşluk (padding-bottom) eklenmiştir. Alt boşluk oranı, konteyner genişliğinin yüzdesine bağlıdır; böylece sabit bir en-boy oranı sağlanır. Ancak, sıfır yüksekliğe sahip konteynerin içine iframe’in yerleşebilmesi için konteyneri göreli (relative), iframe’i ise mutlak (absolute) yaparak div içinde konumlandırıyoruz.
CSS dosyanızın yoluna bir versiyon eklemeyi unutmayın, böylece sayfa tekrar açıldığında tarayıcının önbelleğinde kaydedilen eski sürüm yerine güncel stil dosyası yüklenir.
Örnek:
<link rel="stylesheet" href="https://domain.tld/css/style.min.css?_v=202408222001">
Artık yerleştirdiğiniz video, ekran veya tarayıcı penceresi boyutuna göre otomatik olarak uyum sağlayacaktır.