Embed YouTube Videolarını Responsive Yapma

WordPress’e bir YouTube videosu eklemenin en basit yolu, youtube video paylaş kısmından iframe kodu alıp gönderi içine yapıştırmaktır. Temanız duyarlıysa, YouTube videosu da otomatik olarak yanıt verir ve mobil cihazlarda düzgün bir şekilde küçülür.

Ancak sadece bazı temalar duyarlı iframe’leri görüntülemek için optimize edilmiştir, çoğu tema değildir. Bu nedenle gömülü embed videonuz mobil cihazlarda küçülmez; bunun yerine sadece kırpılır ve videonun bir kısmı mobil cihazlarda görünmez.

Neyse ki, bu sorunu çözmek için uygulayabileceğiniz harika bir CSS kodu var. Web sitenizi biraz daha şişirecek başka bir eklenti yüklemekten daha iyi olduğunu düşünüyorum. Ne kadar az eklentiniz varsa o kadar iyidir.

Embed video kodu nasıl mobil uyumlu hale getirilir

İşte yapmanız gerekenler:

1.) İstediğiniz YouTube videosuna gidin, “Paylaş”a basın, ardından “Yerleştir” sekmesine tıklayın ve iframe kodunu kopyalayın. Seçtiğiniz video seçenekleri bu kodda görünecektir.

2.) Embed kodunuzu aşağıdaki kodu kullanarak div taglarının içine yapıştırın.

Örneğin: <div class="youtube-responsive-container"><iframe ...></iframe></div>

 

3.) Şimdi aşağıdaki CSS kodunu eklemeniz gerekiyor. ( Her temanın kendine ait bir style.css dosyası vardır. Kullandığınız temanın css dosyasını açıp aşağıdaki kodu ekleyin. )

.youtube-responsive-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}

.youtube-responsive-container iframe, .youtube-responsive-container object, .youtube-responsive-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

4.) Dosyayı kaydedin.

Bu kadar! Artık YouTube embed  videonuz responsive olacaktır.

Artık bir gönderiye her embed kodu eklediğinizde, onu div etiketi içine aldığınızdan emin olun:

<div class="youtube-responsive-container"><iframe ...></iframe></div>.

CSS kodunu tekrar eklemeniz gerekmez , sadece iframe kodunun etrafındaki div etiketini ekleyin.

Umarım gönderiyi beğenmişsinizdir ve faydalı bulmuşsunuzdur!



14 Eylül 2022 Tarihinde Tarafından Eklenmiştir.






5 1 oylama
Derecelendir
Yorumlara Abone Ol
Bildir

0 Yorum
En Yeniler
Eskiler Beğenilenler
Inline Feedbacks
View all comments




Çoklu Dil Özelliği
Kamera ve Alarm Şirket Sitesi Doha

Kamera ve Alarm Şirket Sitesi Doha

1613₺ 849 ₺

     Kamera ve Alarm Şirket Sitesi Doha Ürün Detayı İnceleÜrün Detay
Çoklu Dil Özelliği
Yat Kiralama Scripti Blue

Yat Kiralama Scripti Blue

3798₺ 1999 ₺

     Yat Kiralama Scripti Blue Ürün Detayı İnceleÜrün Detay
Çoklu Dil Özelliği
Nakliyat / Lojistik Web Paketi Kai

Nakliyat / Lojistik Web Paketi Kai

1803₺ 949 ₺

     Nakliyat / Lojistik Web Paketi Kai Ürün Detayı İnceleÜrün Detay
Çoklu Dil Özelliği
Kurumsal Web Paketi Ceelo

Kurumsal Web Paketi Ceelo

1613₺ 849 ₺

     Kurumsal Web Paketi Ceelo Ürün Detayı İnceleÜrün Detay
Çoklu Dil Özelliği
Avize / Aydınlatma Web Sitesi Paketi

Avize / Aydınlatma Web Sitesi Paketi

1803₺ 949 ₺

     Avize / Aydınlatma Web Sitesi Paketi Ürün Detayı İnceleÜrün Detay
Çoklu Dil Özelliği
Blog / Haber Web Paketi News

Blog / Haber Web Paketi News

1993₺ 1049 ₺

     Blog / Haber Web Paketi News Ürün Detayı İnceleÜrün Detay