Embed Video Youtube Responsive pada Blog, Caranya Segampang Ini!

Saat ini sebagian besar orang lebih nyaman untuk mencari informasi melalui media berbentuk video daripada tulisan, oleh karenanya Youtube dan semacamnya saat ini sangat digemari. Sebagai seorang Blogger tentu harus dapat melihat situasi ini, harus mencari cara agar blognya tetap 'hidup' dalam situasi seperti ini.

Bagaimana caranya? Ya salah satunya adalah dengan melengkapi entri tulisan blog kita dengan sematan video, jadi selain menampilkan versi tulisan, juga kita tampilkan versi videonya. 

Platform Youtube adalah yang paling populer saat ini, oleh karenanya platform Youtube bisa dijadikan 'mitra' untuk menyimpan dan menyematkan video ke blog kita dengan cara embed. 

Namun sayangnya youtube tidak secara otomatin menyediakan embed video yang responsive, sehingga sematan video Youtube yang ada di blog akan menemui masalah tampilan saat diakses secara mobile, misalnya di perangkat seluler. 

Berikut adalah tampilan embed video Youtube ketika diakses di perangkat seluler sebelum diubah menjadi responsive: 

Tampak pada gambar bahwa tampilan embed video terlihat terpotong saat diakses pada mode seluler. Tentu ini sangat tidak menguntungkan secara tampilan.

Nah, agar bisa menjadi responsive, kita perlu melakukan beberapa setelan dan perubahan. Diantaranya adalah dengan menambah kode CSS dan kode HTML untuk membungkus iframe dengan <div>. 

Berikut adalah kodenya: 

CSS:

.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%; }

HTML:

 <div class="video-container">...</div>

Ganti titik-titk berwarna merah tersebut pakai kode embed. 

Lalu bagaimana caranya? Yuk kita mulai langkah-langkahnya! 

1. Langkah pertama adalah dengan menambahkan kode CSS di atas pada template blog kita. Caranya, pada dashboard blog kita pilih 'Tema' kemudian pilih 'SESUAIKAN' 

2. Selanjutnya pilih 'Lanjutan' kemudian pilih 'Tambahkan CSS'. Copy dan paste kode CSS di atas pada kolom ini, lalu simpan/save.

3. Setelah menambahkan kode CSS ke template blog, saatnya membungkus kode embed dengan <div>, caranya ambil kode embed, dalam hal ini saya mengambilkode embed dari video seperti di bawah: 

4. Lalu kita tambahkan kode HTML di atas pada kode embed. Kode <div class="video-container"> sebelum <iframe, dan </div> setelah </iframe>. 

Maka kode embed akan menjadi seperti ini: 

<div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/Dj6cqAzhVuU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

5. Salin kode yang telah 'dibungkus' tersebut, lalu buka entri dengan mode 'Tampilan HTML', kemudian paste kode embed tadi di tempat yang dikehendaki.

Jika berhasil, maka video akan menjadi renponsive seperti contoh di atas. 

Sekian entri tentang bagaimana cara membuat embed video YouTube menjadi responsive. Terima kasih.