Videolar Nasıl Responsive Edilir

Sitenizin tasarımı responsive fakat sitenizdeki yayınladığınız videolar mobil, tablet gibi platformlarda sitenizin arayüzü ile entegre çalışmayıp taşmalar yapabilir. Bu yazımda sizlere yayınladığınız videoları responsive yapmayı göstereceğim.

Kurulum:

• Aşağıda vermiş olduğum CSS kodunu Blogger kullanıyorsanız CTRL+F ile “]]</b:skin>” kodunu aratıp üstüne ekleyin, farklı bir yazılım kullanmaktaysanız .css dosyasına ekleyin.

.Responsive-Video {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.Responsive-Video iframe,
.Responsive-Video object,
.Responsive-Video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

• Videoları yazılarınıza eklerken kullandığınız embed kodlarını aşağıda verdiğim koddaki “Embed Kodunu Buraya Ekleyin” kısmına yapıştırın.

<div class="Responsive-Video">Embed Kodunu Buraya Ekleyin</div>