Tutorial Merapikan Video Thumb di Video Page

Merapikan jajaran Video Thumb di Video Page dengan CSS.

Untuk melakukannya, anda hanya perlu menambahkan deklarasi satu set ( blok ) selector saja. Dan berikut adalah Preview-nya .

Sebelum perapian :



dan setelah perapian :



Tambahkan blok kode CSS di bawah ini kedalam Custom CSS Anda.

.videothumb {
float: left;
font-size: 10px;
margin: 10px;
overflow: hidden;
text-align: left;
width: 140px;

}

Yang perlu diperhatikan adalah width: 140px; , lebar ini saya sesuaikan untuk lebar content termuat di item box yang hanya 528px ( fix ) pada AVLACK.
Jika theme anda mempunyai lebar item box yang auto atau bisa bervariasi seperti SKYLINE basic theme, Anda harus "bereksperimen" untuk menentukan lebar thumb yang ideal untuk theme Anda.

Anda Juga bisa set margin dan padding-nya agar thumb dapat berjajar rapat atau renggang, sesuai keinginan Anda.

Adapun seting overflow: hidden; dimaksudkan untuk memotong lebar gambar thumb yang melebihi width 140px ( hidden / terpotong di sebelah kanan ).
Multiply meng-capture video untuk dijadikan image thumb berdasarkan aspect-ratio video yang Anda upload. Bisa 3:4 ( layar TV konvensional ) atau 9:16 ( Wide Screen video output ) atau berapapun rasio aspek Video Anda.

Semoga bermanfaat.
Enjoy.