Belakangan ini, konten video untuk ditonton di ponsel mulai banyak. Format video tidak lagi hanya mengikuti ukuran landscape 16:9, akan tetapi juga mulai banyak yang ukurannya portrait 9:16. Lantas bagaimana caranya menempelkan video portrait tersebut ke blog?

Pada tulisan sebelumnya tentang menempelkan berbagai hal di blog WordPress, saya sudah menunjukkan betapa mudahnya memasukkan video youtube ke blog WordPress. Tetapi ternyata secara default video yang ditampilkan selalu dalam format landscape dengan perbandingan 16:9. Kalau kita mengikuti default blok youtube, maka pada bagian samping kiri dan kanan akan otomatis berisi warna polos saja. Seperti pada contoh berikut ini.

Menempelkan video portrait di WordPress

Tadinya saya pikir format landscape youtube ketika ditempel di blog tidak bisa diubah. Ternyata mudah untuk mengubahnya menjadi format portrait seperti contoh berikut ini.

Caranya dengan mengubah properti blok youtube bagian advanced, yaitu untuk additional css class. Nilai defaultnya wp-embed-aspect-6-19 wp-has-aspect-ratio kita ubah menjadi wp-embed-aspect-9-16 wp-has-aspect-ratio

Mungkin ada yang lebih suka membiarkan saja defaultnya landscape. Tetapi saya memilih menampilkan portrait dengan format portrait karena sekarang ini kebanyakan pengunjung blog itu mengakses blog dari ponsel. Dengan menampilkan secara portrait, videonya bisa lebih terlihat dengan jelas, tanpa pembaca harus memiringkan layar atau membuat jadi layar penuh.

Menempelkan video Youtube di Blogspot

Untuk pembaca yang memiliki blog di blogspot, mungkin jadi penasaran juga bagaimana melakukan hal yang sama di blogspot. Atau bahkan membuat supaya tampilan video youtubenya agak lebih besar dari ukuran default yang diberikan blogspot.

Nah untuk bagian ini sebenarnya saya sudah tuliskan panjang lebar di blog khusus untuk contoh di blogspot. Mirip dengan menempelkan berbagai hal, kita perlu menempelkan kode html nya dari bagian HTML View.

Kode yang bisa ditempelkan misalnya seperti berikut ini. Kita bisa menggantikan tautan youtubenya untuk video yang ingin kita tambahkan. Untuk mengubah ukuran video yang ditampilkan, kita bisa mengubah nilai height dan width nya dengan angka lain sesuai dengan rasio yang kita inginkan.

<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="BLOG_video_class" height="480" src="https://www.youtube.com/embed/YyyfCff2do8" width="270" youtube-src-id="YyyfCff2do8"></iframe>
</div>

Kode di atas kalau saya tempelkan di wordpress dengan blok CustomHTML akan terlihat sebagai berikut

Dan kalau saya tukar nilai width dan height nya menjadi seperti berikut

<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="BLOG_video_class" height="270" src="https://www.youtube.com/embed/YyyfCff2do8" width="480" youtube-src-id="YyyfCff2do8"></iframe>
</div>

Akan terlihat menjadi seperti berikut ini.

Semoga jelas ya bagaimana cara menempelkan video Youtube di blog terutama untuk video orientasi portrait.