Youtube Videolarını Css ile Responsive Hale Getirmek

youtube video responsiveMerhaba, uzun zamandır fırsat bulamadığımızdan makale girişi yapamıyordum. Bugün sizlere Youtube videolarını sayfanıza çektiğinizde responsive (mobil uyum) problemi yaşamaktaysanız çözümünü anlatacağız.

Bazen sayfanızın herhangi bir yerinde youtube eklediğiniz yada Youtube’da var olan bir video’yu katarak bunu kullanmak isteyebilirsiniz. Gel gelelim bazı durumlarda bu videolar mobil görünümde problemlere yol açabilir.

Telefon’da sitenizi test ettiğinizde video’nun sayfanızın dışına taştığı durumlar ile karşılabilirsiniz. Bu tarz durumlarda Youtube’dan çektiğimiz videonun mobil ayarlarını şu şekilde yapabiliriz.

Sitenizin kodlamasında kullandığınız genel ayarlarınızın bulunduğu style.css dosyanızı açarak şu class’ları css sayfanıza ekleyin ve kaydediniz.

Bu kodları ekledikten sonra css dosyanızı kaydedin ve çıkış yapın. Daha sonra iframe olarak youtube videonuzu çektiğiniz bölüme gelip, div oluşturup div’e yukardaki class’ı tanımlayalım. Yani şu şekilde;

Kullanımı bu şekilde yapacağız ve kodlarımızı kaydedip sayfamızı yenilediğimizde Responsive olarak video’muzun sayfamıza çekildiğini göreceksiniz.

Anlamadığınız bir yer olursa sormanız yeterli olacaktır.

Bir önceki yazımız olan Mobil Uygulama Nasıl Yazılır? başlıklı makalemizde mobil uygulama geliştiriciliği, mobil uygulama geliştirmek ve mobil uygulama nasıl yazılır hakkında bilgiler verilmektedir.

Content Protection by DMCA.com
ZİYARETÇİ YORUMLARI

Henüz yorum yapılmamış. İlk yorumu aşağıdaki form aracılığıyla siz yapabilirsiniz.

BİR YORUM YAZ