CSS'nin nimetlerinden faydalanarak hem siteniz hemde ziyaretçileriniz için kaliteli çalışmalar yapabilirsiniz, Bu çalışma'da youtube'den veya diğer sitelerden almış olduğunuz iframe video kodlarını sitenize eklerken nasıl responsive yani esnek hale getirebileceğinizi öğreteceğiz.
Youtube Responsive Video Kodu ( CSS / HTML )
Responsive CSS Kodu
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Üst kısımda yer alan css kodunu sitenizin stil kodlarının yer aldığı bölüme eklemeniz gerekmektedir, wordpress ve benzeri siteleriniz varsa bu kodu style.css içerisine eğer blogger kullanıcısı iseniz blogger admin panelinden Tema>Özelleştir>Gelişmiş>CSS ekle bölümüne giriş yaparak buradaki boş alana eklemeniz gerekmektedir.
Responsive HTML Kodu
<div class="video-container">video iframe kodu buraya eklenecek</div>CSS kodunu ekledikten sonra artık işlem tamam demektir, artık videolarınızı sitenize eklerken üst kısımda yer alan HTML div kodlarının arasına ekleyip kaydedebilirsiniz, böylece videolarınız artık esnek ve responsive hale gelerek tüm cihazlarda kaliteli bir görünüm sağlayacaktır.
Örnek Çalışma; Aşağıda yer alan videolardan birtanesi responsive video olarak ayarlanmış ve iframe kodu div kodlarının arasına eklenerek sayfaya eklenmiştir, diğeri ise doğrudan iframe kodu eklenerek kaydedilmiştir.Mobil uyumlu responsive esnek video ile esnek olmayan video arasındaki farkı görebilirsiniz.
Responsive Olarak Eklenmiş Video
Normal Olarak Eklenmiş Video
Üst kısımdaki videolardan farkı kolayca anlıyacaksınızki responsive video daha düzgün bir şekilde cihazınıza uygun bir yapıya sahip oluyor fakat diğeri ise düzensiz vede geniş olarak duruyor.Böylece youtube responsive video kodunuda sizlerle paylaşmış olduk, umarız işinize yarar, bizi tercih ettiğiniz için teşekkür ederiz.
