Merhaba, Bugün sizlere Youtube videolarını sayfanıza çektiğinizde responsive (mobil uyum) problemi yaşamaktaysanız çözümünü anlatacağız.
Bazen sayfanızın herhangi bir yerinde youtube eklediğiniz yada Youtube’da var olan bir video’yu katarak bunu kullanmak isteyebilirsiniz. Gel gelelim bazı durumlarda bu videolar mobil görünümde problemlere yol açabilir.
Telefon’da sitenizi test ettiğinizde video’nun sayfanızın dışına taştığı durumlar ile karşılabilirsiniz. Bu tarz durumlarda Youtube’dan çektiğimiz videonun mobil ayarlarını şu şekilde yapabiliriz.
Sitenizin kodlamasında kullandığınız genel ayarlarınızın bulunduğu style.css dosyanızı açarak şu class’ları css sayfanıza ekleyin ve kaydediniz.
Kod:
.youtube-responsive {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.youtube-responsive iframe,
.youtube-responsive object,
.youtube-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Bu kodları ekledikten sonra css dosyanızı kaydedin ve çıkış yapın. Daha sonra iframe olarak youtube videonuzu çektiğiniz bölüme gelip, div oluşturup div’e yukardaki class’ı tanımlayalım. Yani şu şekilde;
Kod:
<div class="col-md-6 youtube-responsive">
<iframe width="560" height="315" src="https://www.youtube.com/embed/PPWl1FK2BRQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>Kullanımı bu şekilde yapacağız ve kodlarımızı kaydedip sayfamızı yenilediğimizde Responsive olarak video’muzun sayfamıza çekildiğini göreceksiniz.
Anlamadığınız bir yer olursa sormanız yeterli olacaktır.
Moderatör tarafında düzenlendi:
