Sahip olduğunuz veya yönettiğiniz internet sitesine responsive Youtube videosu nasıl eklenir, sizlerle onu paylaşmak istedik. Bazı sitelerde siz her ne kadar istenilen pixel çözünürlüklerini girseniz de kullanıcıların kullandıkları farklı cihazlarda farklı çözünürlük olduğu için video boyutlarında sorun yaşanabiliyor.
İşte bunun kesin ve en doğru çözümü CSS ve HTML kodları ile yapılır. Aşağıda sizlere örnek olarak bir video eklendi. Ayrıca yine aşağıda belirtilen CSS ve HTML kodları da kullanıldı. Şimdi farklı cihazlardan bile girecek olsanız olun artık video sitenizdeki video doğru boyutlarda yayınlanır.
HTML Kodları
<div class="video-container">
<iframe src="https://www.youtube.com/embed/...." frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>CSS Kodları
.video-container {
overflow: hidden;
position: relative;
width:100%;
}
.video-container::after {
padding-top: 56.25%;
display: block;
content: '';
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Konu hakkında farklı deneyimleriniz ve sorunlarınız varsa yorum yaparak tüm kullanıcılarla paylaşabilirsiniz. Vakit ayırdığınız için teşekkür eder, takipler kalmanızı rica ederiz. Kodları aşağıda bulabilirsiniz.
