Cara Jadikan Saiz Video Embed Youtube di Post Blogger Responsive

Permasalahan yang berlaku bila sesuatu template blogger yang sudah mesra mobile tetapi bila datang post yang embed video dari Youtube template itu tidak memaparkan paparan yang sesuai dengan saiz video yang sepatutnya. Andai kata saiz video yang di embed kodingnya itu adalah 500 x 315 di paparan laptop atau PC, maka di mobile pun akan dipaparkan saiz yang sama. Jadi aku nak tunjukkan cara untuk korang jadikan video youtube itu mengecil mengikut saiz yang sesuai bagi paparan device yang digunakan.

on blogger post
Saiz sesuai video youtube untuk mobile secara responsive

Aku menganggap korang tau untuk meletakkan code di dalam panel template > EDIT HTML. 

Langkah 1
Salin / Copy coding ini:

/* video dan iframe */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Langkah 2
Paste coding di atas ke bahagian CSS. Ini adalah langkah sekali sahaja, hanya untuk tambah / update css dalam template Blogger anda.

Langkah3
Dalam post (mode html) Letakkan tag <div class="video-container></div> pada setiap tag iframe dari koding embed youtube itu setiap kali korang buat post yang ada video. Lihat contoh kat bawah ni.


amboi halusnya.
Kalau ada apa-apa pertanyaan tentang saiz video youtube ini boleh la komen kat bawah ni.

Artikel berkaitan dengan "Cara Jadikan Saiz Video Embed Youtube di Post Blogger Responsive"

1 10 Komen untuk "Cara Jadikan Saiz Video Embed Youtube di Post Blogger Responsive"

  1. Satu tutorial yang amat menarik, sangat sesuai buat blogger yang ingin letak video di blog mereka.

    BalasPadam

Terima kasih sebab sudi komen.