Cara Menambahkan Latar Belakang Video ke Situs WordPress Anda

Latar belakang video adalah salah satu fitur situs web yang paling menakjubkan. Hal ini dapat membuat website Anda tidak hanya hidup dan menarik tetapi juga dapat menampilkan lebih banyak gambar dan informasi. Namun, saya yakin tidak banyak orang yang tahu cara menambahkan latar belakang video ke situs web mereka. Oleh karena itu, panduan utama ini akan sangat membantu jika Anda ingin menambahkan latar belakang video ke situs web Anda.

Gunakan Tema WordPress yang Mendukung Latar Belakang Video

Beberapa tema WordPress mendukung tampilan latar belakang video, jadi Anda hanya perlu mengatur tema untuk menampilkannya.

Misalnya, tema Blok Bersih ini mendukung latar belakang video di area sampul header. Maka Anda hanya perlu beberapa langkah sederhana untuk memasukkan video ke dalamnya dengan membuka Customizer, menemukan bagian Media Header , dan mengikuti persyaratan tema.

Sebagian besar tema memungkinkan Anda mengunggah video. Selain itu, banyak yang akan mendukung tautan yang disematkan dari YouTube seperti yang saya lakukan di atas. Ini tidak hanya akan lebih cepat, lebih sederhana tetapi juga membantu situs web lebih ringan, sehingga mengoptimalkan kecepatan situs web. Setiap tema akan disesuaikan dengan cara yang berbeda sehingga Anda perlu membaca instruksi dengan seksama.

Namun, area latar belakang video mungkin dibatasi saat Anda menggunakan tema karena tema mungkin hanya mendukung video yang berjalan di area tertentu. Bagaimana jika Anda ingin menambahkan latar belakang video ke area lain? Saatnya menggunakan plugin untuk menambahkan latar belakang video ke situs WordPress Anda.

Gunakan Plugin untuk Menambahkan Latar Belakang Video ke Situs Web

Ada banyak plugin yang dapat membantu Anda dalam hal ini. Setelah meneliti, saya menemukan bahwa plugin Advanced WordPress Background (AWP) sangat mudah digunakan bagi mereka yang tidak tahu banyak tentang teknologi. Ini juga membantu latar belakang video Anda untuk ditampilkan dengan indah dan menyediakan banyak opsi penyesuaian.

Perhatikan bahwa plugin ini hanya berfungsi pada versi WordPress 5.0 dan editor Gutenberg. Jadi ingatlah untuk memperbarui versi WordPress Anda dan gunakan editor ini.

Langkah 1: Instal Plugin

Anda dapat mendownload plugin ini di wordpress.org, lalu pergi ke Dashboard > Plugin > Add New > Upload Plugin , upload, install dan aktifkan.

Atau di Dashboard > Plugin > Add New , cari plugin dan klik Install > Activate .

Langkah 2: Tambahkan Latar Belakang Video

Menambahkan latar belakang video mirip dengan memasukkan blok di Gutenberg. Jadi jika Anda sudah familiar dengan Gutenberg, itu mudah. Jika tidak, Anda dapat membaca petunjuk penggunaan Gutenberg.

Buka halaman atau artikel yang ingin Anda tambahkan latar belakang video, tambahkan blok baru, dan cari kata kunci “awb” untuk menemukan blok Latar Belakang AWB.

Setelah memasukkan blok ini, di bilah sisi kanan, pilih tab Blokir untuk mengaturnya. Ada 3 pilihan untuk background yaitu gambar, warna, dan video. Pilih Video untuk menyisipkan latar belakang video. Kemudian, Anda memiliki 2 opsi: masukkan video dari YouTube atau URL Vimeo, atau unggah video yang dihosting sendiri.

Jika Anda memilih opsi pertama, Anda hanya perlu memasukkan tautan ke bagian URL Video .

Untuk opsi kedua, buka bagian Self Hosted . Ada 3 macam format video yang akan diupload:

Pilih format yang Anda inginkan, lalu pilih video yang sudah ada di perpustakaan atau unggah yang baru. Itu dia.

Langkah 3: Sesuaikan Latar Belakang Video Anda

Tampilkan Video dengan Tinggi Penuh dan Tambahkan Blok pada Video

Setelah memasukkan video, bingkainya sangat kecil seperti ini. Untuk menampilkan video dengan tinggi penuh, pilih bagian Tinggi penuh di bilah alat blok.

Di bawah ini adalah latar belakang video yang ditampilkan dalam ketinggian penuh dengan teks. Anda dapat menyesuaikan ukuran, warna, posisi, dll untuk teks secara normal di tab Blokir di bilah sisi. Ini berguna jika Anda ingin menempatkan video ini di sampul header atau bagian ajakan bertindak.

Anda bahkan dapat mengganti teks dengan blok apa pun. Ini mirip dengan memasukkan blok Gutenberg apa pun.

Pengaturan video

Di tab Video , Anda harus mengatur beberapa bagian utama seperti di bawah ini untuk menampilkan latar belakang video Anda dengan mudah:

(1): Anda dapat mengaktifkan atau menonaktifkan video latar belakang di perangkat seluler.
(2) dan (3): masukkan waktu awal dan akhir video di sini untuk menampilkan bagian yang diinginkan, terutama jika video aslinya terlalu panjang.
(4): Anda dapat mengulang video setelah selesai. Saya pikir Anda harus mengaktifkan fitur ini agar video tetap diputar ulang secara otomatis.

Pengaturan Gambar Poster

Scroll ke bawah, Anda akan melihat bagian Poster Image . Foto yang Anda pilih di sini akan ditampilkan dalam 1 detik sebelum video ditampilkan. Opsi di bawah ini memungkinkan Anda untuk menyesuaikan ukuran dan gaya gambar yang tepat.

Berikut adalah hasil setelah menambahkan gambar poster.

Instal Hamparan

(1) adalah warna hamparan untuk latar belakang video, dan (2) adalah transparansi hamparan. Misalnya, oranye adalah warna utama situs saya, jadi saya memilih warna ini pada hamparan video agar sesuai dengan desain web.

Adapun Palet Warna , ini adalah alternatif untuk video. Dengan kata lain, Anda benar-benar beralih dari latar belakang video ke latar belakang berwarna. Untuk menghapus latar belakang warna ini, pilih tombol Hapus.

Instal efek Parallax dan Mouse Parallax

Di tab Paralaks , Anda dapat mengaktifkan atau menonaktifkan efek ini dan memilih berbagai jenis paralaks dengan mudah. Ini adalah efek yang sangat bagus dan menarik, jadi Anda harus menggunakannya dan memilih gaya yang sesuai untuk situs Anda.

Efek paralaks mungkin familiar bagi Anda, sedangkan efek paralaks mouse mungkin tidak. Dapat dengan mudah dilihat saat Anda menggerakkan mouse ke atas video, maka adegan di dalam video juga akan bergerak.

Anda dapat menggunakan efek ini dengan membuka bagian Paralaks mouse > Aktifkan . Kemudian Anda dapat menyesuaikan Ukuran dan Kecepatan . Semakin rendah kecepatannya, semakin cepat video bergerak. Semakin kecil ukurannya, semakin banyak video yang bergerak, membuat Anda merasa seperti video "berdenyut" saat menggerakkan mouse di atasnya.

Berikut adalah contoh ketika saya memilih kecepatan dan ukuran terendah.

Pengaturan Spasi

Di tab Spasi , ubahsuaikan jarak dari video ke margin halaman, masukkan parameter jarak ke bagian Margin dan Padding . Misalnya, saya memasukkan padding 10 dan margin 20 untuk keempat sisi video.

Pengaturan lanjutan

Di CSS Tambahan dari bagian Lanjutan , Anda dapat menambahkan kode khusus untuk latar belakang video. Dan bagian jangkar HTML memungkinkan Anda menggunakan tautan kata kunci untuk judul di video. Jika Anda tidak tahu apa-apa tentang kode pendek, Anda dapat melewati bagian ini.

Dan inilah hasil akhirnya. Videonya terlihat cukup bagus, bukan?

Kata-kata terakhir

Melalui artikel yang super detail ini, saya harap Anda dapat menambahkan background video ke website WordPress Anda untuk menarik pengunjung. Tentang plugin AWB, sebaiknya gunakan dengan tema yang sangat mendukung Gutenberg seperti eStar. Di sini, saya menggunakan tema eStar dan plugin AWB untuk memiliki latar belakang video yang menarik untuk sampul header.

Kombinasi sempurna ini mungkin membuat video terlihat lebih menarik, bukan? Jika Anda ingin mengetahui lebih banyak tips di WordPress, jangan ragu untuk berkomentar dan membagikan pemikiran Anda di bawah artikel ini.