Di beberapa tahun terakhir telah banyak website yang menggunakan background video (latar menggunakan video) sebagai salah satu elemen desain mereka. Hal ini telah merambah menjadi sebuah tren desain website, yang didukung pula dengan cepatnya koneksi internet, codec video yang berkembang, dan browser yang dapat mendukung video HTML5. Meskipun telah menjadi tren, background video jika diterapkan secara tidak tepat akan mengakibatkan konsekuensi negatif. Contohnya saja seperti lambatnya loading halaman, mengalihkan perhatian pengunjung website dari konten, dan bahkan menurunkan kenyamanan mereka dalam menjelajahi website anda karena adanya terlalu banyak gerakan.
Namun, jika diterapkan dengan benar, background video dapat membawa manfaat bagi bagi website dan bisnis anda sekalipun. Bagaimanakah caranya untuk menghindari kesalahan dalam menggunakan background video? Berikut adalah hal-hal yang perlu anda perhatikan.
Kompres Video Menjadi Sekecil Mungkin
Tidak ada yang lebih buruk dari membuka website yang enggan untuk tampil secara penuh, konten maupun background. Tak kalah buruk lagi jika video berhenti dan loading, entah karena koneksi tidak mencukupi atau ukuran video yang terlalu besar. Selain mengalihkan perhatian, hal tersebut juga sangat mengganggu tampilan website sehingga memberikan kesan buruk.
Untuk menghindari hal tersebut, anda perlu mengompres video menjadi bitrate terkecil. Meskipun begitu, pilihlan bitrate dengan tampilan video yang terlihat sepadan untuk dijadikan background website. Dengan kata lain, dengan tampilan yang jelas. Memang menggunakan video dengan tampilan terbaik, 1080p misalnya yang terlihat sangat jelas. Namun, ukurannya yang besar akan berbalik kepada pengunjung website karena harus menunggu lama untuk video dapat loading.
Sebaiknya anda menggunakan video 720p dengan fps (frame per second) yang rendah antara 24 atau 25 fps. Kemudian tes bitrate yang berbeda diantara 750k dan 1250k sebelum memilih mana yang memiliki ukuran terendah dengan kualitas gambar terbaik.
Gunakan Overlay
Jika anda tidak puas dengan kualitas video anda atau pilihan anda mempunyai ukuran yang terlalu besar, maka coba gunakan overlay untuk video anda. Penambahan overlay sendiri dapat membantu untuk menyamarkan kualitas video yang anda pakai untuk background website. Hal ini dapat dengan mudah dilakukan dengan memposisikan div langsung setelah video anda atau menggunakan pseudo-elemen dari container video ::after. Anda pun harusnya menggunakan CSS pointer-events: none; untuk menjamin bahwa video tidak akan berhenti saat pengunjung website mengklik video.
Warna yang solid dan semi-transparan untuk overlay akan setidaknya sedikit membantu sehingga video pun akan terlihat baik yang semula dengan tampilan yang tidak begitu memuaskan. Akan lebih bagus lagi jika warna overlay sesuai dengan warna representasi brand anda. Selain dapat menyembunyikan kualitas video, warna overlay tersebut pun akan meningkatkan brand awareness.
Batasi Ukuran dan Durasi Video
Bitrate rendah akan memastikan video anda untuk dapat berjalan dengan lancar tanpa harus buffer. Namun, ingatlah bahwa pengunjung membuka website anda tidak untuk membuka video, sehingga jangan terlalu fokus dengan video tersebut semata. Untuk itu, batasi durasi video anda hanya sampai 30 sampai 40 detik. Lebih baik lagi jika anda menggunakan video pendek, sehingga mampu untuk digunakan sebagai video loop (putar dan playback otomatis). Video seperti itu sendiri hanya mempunyai kisaran ukuran 1-2 MB semata, tergantung dari panjangnya durasi.
Hindari Gerakan Berlebihan
Gerakan yang dimaksud disini adalah video dengan gerakan yang jauh dari statis. Dasar dari background video itu sendiri adalah video sebagai background. Dengan demikian, elemen sebagai background sendiri harus anda prioritaskan dibanding dengan video. Untuk itu, pastikan video yang anda gunakan tidak akan merampas perhatian pengunjung website dari CTA yang seharusnya menjadi fokus anda. Background video yang baik harusnya tidak mengganggu perhatian pengunjung website dari konten sebenarnya.
Baca juga: Langkah Penggunaan Background Video Untuk Website (Bagian 2).
