Youtube Videosunu Responsive Yapma
Gönderilme zamanı: 25 Kas 2021, 21:59
Youtube'un bize verdiği siteye gömme kodu her cihaz için pixel tabanlı. Oysa bir masaüstü kullanıcısıyla bir telefon kullanıcısı aynı boyutta görmemeli. Aşağıdaki kod ile bu sorunu çözebiliriz.
Bir CSS dosyanız varsa style bloğunun içindekileri oraya atıp kullanabilirsiniz, ancak hazır bir web sitesi kurucu kullanıyorsanız veya CSS'ten anlamıyorsanız doğrudan aşağıdaki iframe bloğunun yerine kendi Youtube videonuzu koyup kullanabilirsiniz.
Bir CSS dosyanız varsa style bloğunun içindekileri oraya atıp kullanabilirsiniz, ancak hazır bir web sitesi kurucu kullanıyorsanız veya CSS'ten anlamıyorsanız doğrudan aşağıdaki iframe bloğunun yerine kendi Youtube videonuzu koyup kullanabilirsiniz.
Kod: Tümünü seç
<style>
.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%; }
</style>
<div class="video-container">
<iframe width="480" height="315" src="https://www.youtube.com/embed/videoseries?list=PLk6RGjs8w1SqxZZp-gpbZHxL4YzwJhr04" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>