Menambahkan Video Background dengan Cloudinary pada Theme Blogger

Template Coming Soon akhirnya berhasil dikonversi sesuai platform Blogger. Pada saat mengerjakan konversi tersebut ada catatan yang perlu disampaikan. Siapa tahu catatan ini bermanfaat untuk evaluasi pengetahuan saya di masa mendatang.

Hal ini terkait penempatan video latar belakang pada sebuah theme Blogger. Awalnya saya pikir itu mudah karena Google mempunyai Youtube, Google Drive dan Blogger sekaligus. Dalam bayangan sebelumnya, saya pikir tinggal unggah di youtube, blogger atau drive misalnya.

Setelah itu baru masuk ke theme Blogger dan menempatkan tautan yang mengarah ke sana.

Dan ternyata, usaha tersebut tidak bisa dilakukan karena video tidak berputar otomatis pada saat akses website pertama kali. Bahkan gambar screenshot video pun tidak tampil sama sekali. Padahal pada link demo Startbootstrap aslinya ada video latar belakang yang berjalan.

Kemudian saya mencari tahu bagaimana caranya upload video di Blogger seperti halnya mempunyai hosting sendiri. Maksudnya, seperti melalui folder assets kemudian copy URL dengan format video yang terlihat; misalnya mp4. 

Dan akhirnya ku menemukanmu; Cloudinary. Tool ini wajib diketahui oleh Blogger semuanya. Bahkan bukan hanya tentang media library yang akan di bahas kali ini.


Cara Upload Video Melalui Cloudinary

Media library bukan hal yang asing bagi pengguna Wordpress Self-hosted. Lalu bagaimana dengan pengguna Blogspot. Tenang, tugas ini bisa diambil alih dengan Cloudinary. Dan kali ini kita contohkan dulu bagaimana mengunggah video melalui Cloudinary. Tujuannya, agar copy URL yang didapatkan semisal dengan pengguna Wordpress yang memiliki sewa hosting. Berikut ini cara upload video di Cloudinary yang dilengkapi dengan screenshot gambar.

1. Kunjungi website cloudinary.

2. Pilih "Sign up for free"kemudian pada bagian"Sign up with email" pilih "Sign up with google".

3. Masukan email dan password gmail Anda.

4. Pilih "main role" sesuai kebutuhan, misalnya "Developer" kemudian klik "Continue".

5. Pilih project pertama yang akan dilakukan di Cloudinary, misalnya "Enhance my site visual appereance" atau yang mana saja tidak mengapa. Setelah itu jangan lupa klik "Done" untuk menutup menu "Welcome to Cloudinary".

6. Klik "Dashboard" untuk menuju beranda di Cloudinary atau langsung ke "Media Library" untuk upload media yang dibutuhkan.

7. Buat folder baru misalnya "Video"atau langsung saja pilih "Upload" untuk mengunggah video.

8. Klik "Browse" jika video berasal dari komputer/perangkat kita. Temukan file video yang akan  diunggah kemudian pilih "Upload".

9. Pada video yang sudah diunggah silahkan sorot pada pojok kanan atas kemudian pilih icon copy URL 9 (< >). Jika melalui icon sebelahnya lagi pilih icon elipsis (⋮) kemudian pilih "copy URL" sebagaimana terlihat pada contoh gambar di bawah ini.


Cara Menambahkan Video Background pada Template Blogger

Setelah berhasil upload video di Cloudinary dan mendapatkan URL video tersebut. Sekarang saatnya menempatkan pada theme Blogger yang diinginkan. Pada contoh kali ini menggunakan template Coming Soon yang sudah dikonversi menjadi theme Blogger.

Bagi yang belum memiliki templatenya silahkan download coming soon terlebih dahulu. Setelah itu pasang template Coming Soon pada Blogger. Adapun cara menambahkan video background silahkan ikuti langkah-langkah di bawah ini.

1. Login ke dashboard Blogger.

2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".

3. Cari baris kode yang terlihat seperti di bawah ini. Baris kode ini ada di bawah "<!-- Background Video-->". Silahkan gunakan Ctrl + F dan masukan kata "Background Video" agar lebih cepat.

4. Hapus tulisan 'pastekan URL Video yang didapat dari Cloudinary di sini' tanpa tanda kutip.

5. Ganti dengan URL yang didapatkan pada langkah nomor 9 di atas dengan cara klik kanan dan pilih "Paste" atau "Tempel".

6. Simpan template.


Kesimpulan

Cloudinary memiliki beragam layanan dari yang gratis dan yang berbayar. Salah satunya adalah sebagai tempat media library yang URLnya bisa kita copy. Dengan cara inilah akhirnya saya berhasil menempatkan video sebagai latar belakang pada theme Blogger.

Hanya saja, hasil akhir yang didapat masih kurang sempurna. Dimana video tersebut hanya berjalan sekali putaran dan tidak berulang-ulang. Padahal fungsi loop sudah diaktifkan melalui baris kode yang ada di theme Blogger.

Mungkinkah ada setingan selanjutnya yang belum saya ketahui? Monggo, barangkali ada yang mempunyai pengalaman tersebut bisa komentar.

Akhir kata, sekian bahasan kita kali ini tentang cara menambahkan video background pada template Blogger. Bahasan kali ini menggunakan tool tambahan dari Cloudinary versi gratis.

Selamat mencoba.

Baca Juga

Tidak ada komentar:

Posting Komentar