Youtube Videosunu Responsive Yapma

[melihcelenk]

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.

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>