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 MEDYAWEB TASARIM Tarafından Eklenmiştir.