Penggunaan background video untuk website telah populer di berbagai kalangan, website untuk bisnis maupun pribadi. Saat video mulai berputar, akan sangat sulit untuk mengabaikannya karena gambar latar yang pada umumnya statis akan bergerak. Oleh karena itu, penggunaan background video sendiri sangatlah bagus untuk menarik perhatian pengunjung website. Namun, jika tidak diterapkan dengan tepat, maka sebaliknya, akan berakibat fatal. Beberapa langkah penggunaan background video sendiri telah dibahas di artikel sebelumnya, berikut lanjutan dari artikel tersebut.
Kontras Cukup dengan Teks Foreground
Jika anda menyisipkan teks diatas video, penting halnya untuk memastikan teks tersebut untuk mudah dibaca. Oleh karena itu, warna teks yang mirip dengan video akan membutuhkan tambahan overlay. Pilihan lain adalah dengan mengganti warna teks atau menambahkan text-shadow.
Pastikan Video Sesuai dengan Container
CSS3 mempunyai bagian yang dikenal banyak developer sebagai background-size yang salah satu pilihannya adalah cover. Bagian ini menjamin bahwa gambar background akan selalu menutupi semua elemen, tidak lebih kecil atau lebih besar dari rasio awal.
Terdapat pula bagian yang tidak begitu dikenal yang disebut sebagai object-fit yang juga berfungsi sama untuk elemen DOM untuk menjamin video akan selalu menutupi kontainer. Namun, browser yang mendukung object-fit tidak begitu baik, sehingga kita pun perlu untuk menulis JavaScript untuk meniru gungsinya.
Namun, ada juga jQuery plugin sederhana yang dikenal sebagai jQuery Background Video yang dapat mengatasi permasalahan tersebut.
Perangkat
Dukungan background video tidak begitu bagus seperti iOS yang tidak akan secara otomatis memutar video namun akan menambahkan sebuah ikon putar yang dapat memulai video jika disentuh melalui aplikasi pemutar media. Perangkat Android pun sama saja. Dengan demikian akan lebih baik jika memilih untuk tidak mengaktifkan video, sehingga pengunjung website mobile akan melihat background gambar, bukan video.
Jangan Mengulang Terus-Menerus
Jika anda menambahkan atribut loop di tag video anda, browser pun akan terus-menerus memutar video sampai anda menutup tab browser. Hal ini akan memperlampat penggunaan CPU dan juga loading halaman website.
Anda pun bisa menghapus atribut loop sehingga video akan berputar satu kali saja. Namun, jika anda menggunakan video durasi sangat pendek, tampilan website pun menjadi tidak begitu menarik karena video berputar singkat sekali. Sangatlah mudah untuk mnambahkan JavaScript yang dapat memberhentikan video setelah durasi detik tertentu.
Tambahkan Tombol Pause
Meskipun video pilihan tidaklah mengganggu dengan gerakan minimun, terdapat pula beberapa pengunjung website yang lebih memilih untuk membuatnya berhenti. Entah memang video mengganggu fokus mereka, memperlambat jalannya perangkat, atau mereka tidak mengetahui jika video dapat berhenti secara otomatis setelah durasi tertentu.
Fading on Play
Ingatlah background video harusnya tidak mengganggu fokus CTA website anda. Gerakan yang terlalu kentara akan membuat pengunjung website untuk sulit fokus dari konten halaman yang sebenarnya. Untuk itu, anda pun dapat membuat agar video dapat berputar dan menghilang secara perlahan.
Hal ini dapat dilakukan dengan menambahkan gambar poster sebagai background, mengatur opacity video dari nol ke default, dan menambahkan transisi CSS di opacity properti, dan mengatur opacity kembali ke 1 saat video mulai berputar.
