Kılavuz Yazılım / Css / Youtube Videolarını CSS ile Responsive Yapmak

Youtube Videolarını CSS ile Responsive Yapmak

Youtube video responsive yapmakSayfanızın her hangi yerinde Youtube ‘dan iframe ile video gösterebilirsiniz. Telefon ile baktığınız sayfanızda mobil uyum problemleri yaşamanız durumunda, altta paylaştığım Css kodları ile Youtube Video’larınızı Responsive olarak sayfa içinde kullanabilirsiniz.

Bunun için yapmanız gereken sayfanızın main.css veya style.css gibi genel css kodlarınızın barındırıldığı sayfanızı açmak ve altta paylaştığımız css kodlarını yapıştırmak olacaktır. Kaydetme işleminde sonra css dosyanızı kapatabilirsiniz.

Responsive Video Kodu:

Şimdi Youtube’a girelim ve örnek bir video’yu sayfamıza çekelim.

İnna’nın No Help video klibini açtım ve klibin altında bulunan “Paylaş” butonunu kullanıyoruz.

Bu aşamadan sonra video’nun iframe kodlarını almak için. “Yerleştir” butonuna tıklıyoruz ve iframe kodlarımız karşımıza çıkıyor.

Embed Video kodundan iframe kodumuzu seçip kopyalıyoruz. Bu kodumuzu bir div’in içine atıyoruz. Oluşturduğumuz div’in için class=”youtube-res” ile responsive olarak ekrana çekilmesini sağlıyoruz.

Kodları çalıştırıp testlerini yaptığınızda sorunsuz bir şekilde Responsive olarak video’nuzun görüntülenebildiğini göreceksiniz.

Bir önceki yazımız olan Css Nedir? ve Kullanımı başlıklı makalemizi de okumanızı öneririz.

Rating: 5.0/5. From 2 votes.
Please wait...

Öneriyoruz

Css Nedir? ve Kullanımı

CSS nedir?: Css açılım itibariyle “Cascading Style Sheets” ve Türkçe karşılığı ise Stil şablonlarıdır. Css ...

2 Yorumlar

  1. Hali hazırda bulunan sitemiz için konu içeriklerini video programları ile görsellerini ve makalelerini birleştirip video yaparak youtube yüklemesi yapsak. Bu videoları her konu içeriğine ekleme gibi bir durum olabilir mi? Yani bu iframe kodlarını konu içeriğine nasıl monte edebiliriz? İki türlü kazanç kapısı oldukça başarılı olacaktır.

  2. Hocam anlatım güzel olmuş eline sağlık ama kısayoldan bir sorum olacak, halihazırda wordpress ile kurulmuş bir sitede youtube videolarını responsive yapacak bir eklenti tavsiye edebilir misin?

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir