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

Youtube Videolarını CSS ile Responsive Yapmak

Youtube video responsive yapmak

Sayfanı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.

Hakkında Admin

Çukurova Üniversitesi bilgisayar programcılığı bölümü mezunu. Birçok kurumsal firma'da Software Developer olarak çalıştı. Bilgi ve tecrübelerini bu blog'tan paylaşıyor.

Öneriyoruz

css tam sayfa arkaplan resmi

Css ile Tam Sayfa Arkaplan Resmi

Front End Developer’ların yani tasarımın ön kısmını kodlayan yazılımcıların özel tasarımların html’e dökülme aşamasında kullandıkları ...

3 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?

  3. Aynı işlemi vk openload rapid ve mailru gibi sitelerde kullanmamız mümkün mü? Mümkünse kodları paylaşır mısınız?

Bir cevap yazın

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