lookjapan.COM - IRC ve mIRC dünyasının forumu! - Video Oynatıcıları Responsive Hale Getirme

XenForo'da varsayılan olarak tüm video oynatıcılar fixed genişliktedir. Yani ilgili kodda hangi genişlik & yükseklik değerleri verildiyse o kadardır.

Video oynatıcıları responsive hale getirmek ise oldukça basittir.

Öncelikle hangi video servisini responsive yapmak istiyorsanız, onun kod sayfasını açın (/admin.php?bb-code-media-sites/ yoluyla erişebilirsiniz).

Ardından Embed HTML kodunu, şu şekilde bir div içine alın:

Kod:

<div class="responsiveVideoContainer">

video kodu

</div>

Ardından kaydedin.

Şimdi extra.css şablonunu açın ve ekleyin:

Kod:

.responsiveVideoContainer

{

    position: relative;

    padding-bottom: 56.25%;

    padding-top: 30px; height: 0; overflow: hidden;

    margin-bottom: 10px;

}



.responsiveVideoContainer iframe

{

    margin-bottom: 10px;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

Hepsi bu kadar. Artık video oynatıcınız responsive genişliğe sahip olacak.

(Div kodlarını her bir video servisi için tek tek eklemeniz gerektiğini unutmayın).

Demo

Öncesi:

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Sonrası:

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Kaynak: r10