Belum lama terpikirkan mengapa tidak menambahkan video YouTube menggunakan Bootstrap ke blog ini yang berbasis CMS Joomla. Beberapa artikel di blog ini menyertakan video Youtube yang masih terkait dan relevan untuk menambah dan melengkapi isi konten. Namun, penambahan video YouTube dilakukan dengan cara standar, copy dan paste kode penyematan video.
Teknik copy dan paste kode penyematan dari fitur bagikan video YouTube tetap bisa, namun ukuran tampilan video terbatas pada 560 x 315 pixel. Bila area artikel lebar, maka menjadi kurang menarik ketika visitor sampai ke bagian video. Ini bisa diatasi dengan mengubah ukuran secara manual, namun kurang praktis untuk banyak video, belum lagi aspek rasio, dan responsivitas video di ukuran layar berbeda.
Joomla adalah CMS (content management system) yang mengintegrasikan Bootstrap. Bootstrap sendiri adalah framework frontend gratis popular berisi templat HTML, CSS, dan JavaScript untuk mempercepat pembuatan blog atau website dan aplikasi web lainnya. Blog ini dan juga blog topikit.com telah memanfaatkan sedikit kelas CSS Bootstrap untuk membuat tampilan produk toko dan untuk efek sticky sidebar.
Bootstrap menyediakan sangat lengkap kelas CSS pra-definisi. Untuk menggunakannya di CMS Joomla, Anda tinggal menambahkan kelas CSS yang diinginkan di blog CMS Joomla. CMS Joomla 3 menggunakan Boostrap 2.x, CMS Joomla 4 menggunakan Bootstrap 5, dan CMS Joomla 5 serta CMS Joomla 6 menggunakan Bootstrap 5.3.7 atau versi yang lebih tinggi.
Saat artikel ini ditulis, blog termasmedia sudah di CMS Joomla 5.3.4, yang seharusnya menggunakan kode Bootstrap 5 untuk menambahkan (embed) video YouTube. Karena kekeliruan, digunakan kode dari Bootstrap 4. Alhasil, ukuran tampilan video jadi kecil. Seharusnya, lebar video memenuhi lebar area dengan rasio tinggi proporsional.
1. Kode Bootstrap.
Dari dokumentasi Bootstrap, implementasi kode untuk menambahkan video YouTube ternyata berbeda antara Bootstrap 4 dan Bootstrap 5. Ini yang menyebabkan tampilan video di blog jadi kecil saat menggunakan kode Bootstrap 4, tidak sesuai yang diharapkan. Bootstrap 4 menggunakan kelas CSS embed-responsive dan embed-responsive-16by9, sedangkan Bootstrap 5 menggunakan ratio dan ratio-16x9.
Kode Bootstrap 4 untuk menambahkan video responsif.
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="" allowfullscreen></iframe> </div>
Kode Bootstrap 5 untuk menambahkan video responsif.
<div class="ratio ratio-16x9"> <iframe src="" title="YouTube video" allowfullscreen></iframe> </div>
2. Pengaturan di CMS Joomla.
Joomla adalah CMS dengan keamanan kuat. Joomla akan mengaktifkan serangkaian batasan untuk kode yang ada dalam elemen <iframe> HTML. Untuk menonaktifkan batasan ini, Anda perlu menonaktifkan Sandbox Iframes dari editor default CMS Joomla, TinyMCE. Masuk ke administrator Joomla > System > di bagian Manage, klik Plugins. Cari Editor - TinyMCE dan klik, di tab Set 0, nonaktifkan Sandbox Iframes dan kemudian simpan perubahan.
3. Menambahkan Video YouTube.
Untuk mendapatkan tampilan responsif video YouTube di berbagai ukuran layar perangkat, gunakan kode Bootstrap 5 untuk CMS Joomla 5.3.4 atau versi CMS Joomla yang lebih tinggi. Untuk bisa menampilkan video YouTube, Anda perlu mengambil url video YouTube dari fitur bagikan YouTube, bukan dari url video di kotak teks alamat url di bagian atas video.
Cari video YouTube yang ingin ditambahkan atau ditampilkan di blog CMS Joomla, klik tombol Bagikan > klik tombol Sematkan. Di kotak dialog Sematkan Video yang muncul, sorot dan salin (copy) nilai dari atribut src.
Di CMS Joomla, Anda bisa menambahkan video YouTube ini di dalam artikel atau di posisi modul tertentu dari template Joomla. Kemudian tempel (paste) nilai yang sudah disalin sebagai nilai dari atribut src di kode Bootstrap 5.
<div class="ratio ratio-16x9"> <iframe src="https://www.youtube.com/embed/kBddBRQ-xic?si=Hm9DawcmpR0gJqDz" title="YouTube video" allowfullscreen></iframe> </div>
Sekarang, video YouTube yang sudah Anda tambahkan, ditampilkan secara responsive di blog CMS Joomla. Anda bisa memperbesar atau memperkecil laman tab browser untuk melihat perubahan ukuran tampilannya.
