Videonun %100 Genişlikte Olmasını (Responsive) Sağlayamadım, Hangi CSS Kodunu Kullanmalıyım?

03-12-2021, 09:15:45

Yazı içerisine eklediğimiz videonun genişliği 500px olarak otomatik tanımlanıyor ve yüksekliği otomatik. İçerik genişliğine uygun hele nasıl getirebilirim yani responsive nasıl yapabilirim?

03-12-2021, 09:25:27

#2

website

Width="100%"

Verin hocam

03-12-2021, 10:21:06

#3

SkyGhostAir

website adlı üyeden alıntı: mesajı görüntüle

Width="100%"

Verin hocam

Yok hocam öyle yapınca yüksekliği değişmedi için şöyle oluyor:

Öncesi:

Sonrası:

03-12-2021, 10:47:35

#4

TVBilgi

Merhaba, aşağıdaki kodu deneyebilirsiniz.

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/snkshU84SGA' frameborder='0' allowfullscreen></iframe></div>

Kaynak: https://embedresponsively.com/

03-12-2021, 12:42:36

#5

SkyGhostAir

TVBilgi adlı üyeden alıntı: mesajı görüntüle

Merhaba, aşağıdaki kodu deneyebilirsiniz.

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/snkshU84SGA' frameborder='0' allowfullscreen></iframe></div>

Kaynak: https://embedresponsively.com/

Bu kodlardan yola çıkarak şu eklemeleri yaparak sorunu çözdüm:

.wp-block-embed {
    position: relative;
    padding-bottom: 56.25%;
}
.wp-block-embed > div {
    position: absolute;
}
.wp-block-embed > div,
.wp-block-embed iframe {
    width: 100%;
    height: 100%;
}

03-12-2021, 21:42:00

#6

ugur2nd

Videonun embed koduna girin. Sonra öğeyi inceleyip CSS kodlarına bakın. 😀👈 🧠 🆓

03-12-2021, 23:17:36

#7

SkyGhostAir

Sorun kendi geliştirdiğim temadaydı. Nihai çözümün şöyleymiş:

     /* Support for responsive embeds */
     add_theme_support( 'responsive-embeds' );

Temaya bu özelliği Wordpress otomatik olarak ekliyor.