Cara Letak Responsif YouTube Video Di Blog

꧁Bismillahirrahmanirahim꧂

Pagi ni memang sejuk sangat bila celik biji mata subuh-subuh 😂. Lama jugak hujan malam tadi. Sampai ke subuh pun masih ada sisa-sisa renyai lagi. By the way, untuk pengakhiran bulan Oktober yang indah ni, Syu nak buat perkongsian sikit pada korang-korang yang tak tahu macam mana nak letak responsif YTube video dalam entri, Memang tak dinafikan, ada masa & ketika kita nak jugak selitkan hiburan segala dalam blog. Bukan apa, saja nak bagi blog meriah. Tak ada lah sendu jer dengan tulisan & gambar memanjang. 

Mesti runsingkan kalau korang letak video YTube lepas tu dia punya paparan video tu tak responsif.  Tambah-tambah bila korang tengok guna handphone atau tablet. Bila jadi pembaca, nak klik video pun rasa macam malas jer sebab video  yang dikongsi tu keluarnya separuh. Kalau terkena video yang autoplay, nak tak nak layankan jelah sampai sudah 😅. 

Ni paparan video tanpa menggunakan kod responsif (Sila papar  menggunakan mobile mode 📲). Sedihkan kalau tengok video separuh macam ni 😂.

Bila view guna desktop mode, video memang nampak sempurna tanpa cacat cela. Tapi, bila korang tengok menggunakan mode yang berskala kecil dari dektop (tablet atau handpone), dia punya aspek ratio tu akan lari sikit. Video yang korang dah kongsi tu tak cantik terletak & akan nampak separuh jer bila nak tengok.

Kalau nak tahu, satu-satu paparan video di blog tu dikatakan responsif bila mana kita buka menggunakan handphone atau tablet, saiz & aspek ratio video tu tak berubah. Apa yang berlaku adalah, video yang responsif ni akan mengubah saiz paparannya secara automatik & pada masa yang sama mengekalkan aspek ratio video tu.

Macam mana nak buat? Ni yang Syu nak explain ni 😄. Untuk langkah yang pertama, korang kena letak kod CSS ni dalam theme korang. Dengan meletakkan kod CSS ni, baru kod html korang apply akan aktif. 

LANGKAH 1 : MASUKKAN KOD CSS

.videoyoutube{text-align:center;margin:auto;width:100%}.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

 

Untuk masukkan kod CSS ni ada dua cara. So, apa yang korang perlu buat adalah, korang pergi ke bahagian THEME > CUSTOMIZE > ADVANCED > ADD CSS > SAVE. Atau cara kedua korang boleh masukkan kod CSS di bahagian EDIT HTML. Pastikan korang letak kod CSS sebelum </b:skin>. Lepas dah SAVE baru korang boleh masukkan kod html ni bersama embedded kod YTube dalam post korang.

LANGKAH 2 : MASUKKAN KOD KE DALAM POST

 

<div class="videoyoutube">

<div class="video-responsive">

<div style="text-align: center;">< EMBEDDED KOD YTUBE >

</ div></ div></ div> 

 

Bila korang dah masukkan kod responsive, video YTube korang akan jadi macam ni (Sila view guna mobile mode 📲). So, senang untuk orang tengok video YTube yang korang dah share. pada blog.  Tak ada lah keluar separuh. Macam sedih jer bila nak tengok 😂.

Ni paparan video selepas menggunakan kod responsif. Kan seronok tengok macam ni 😜. 

Bila guna responsif kod ni, dia punya video tu akan disuai padankan secara automatik mengikut view mode yang korang guna ketika buka blog. Tak kiralah korang buka melalui desktop, tablet waima mobilephone sekalipun. Nampak kemaskan bila buat macam ni. Korang pun akan berpuas hati bila korang buka & tengok blog korang sendiri. Cubalah!! 😉💕