Youtube Videosunu Responsive Yapma

Web geliştirme ile ilgili konuları burada bulabilirsiniz
Cevapla
Kullanıcı avatarı
melihcelenk
Site Admin
Mesajlar: 218
Kayıt: 05 Eki 2021, 03:23

Youtube Videosunu Responsive Yapma

Mesaj gönderen 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>
Cevapla