Bagaimana Cara Membuat Video Background di WordPress?

Halo, Assalamualaikum – Semoga pembaca dalam keadaan sehat selalu. Kali ini saya akan menjelaskan tentang video background. Apa itu video background? lalu apa fungsi serta kelebihan dan kekurangan menggunakan video background di website.  Berikut ini penjelasan mengenai video background.

Video background merupakan salah satu tren desain web paling populer masa kini. Video background ini berfungsi untuk membantu klien-klien yang ingin mempromosikan website bisnisnya mereka agar bisa menarik perhatian pelanggan dan membuat website mereka tampak lebih menarik, modern, styles dan powerfull.

Kelebihan dan kekurangan menggunakan video background pada website anda, berikut akan dijelaskan kelebihan dan kekurangannya.

Kelebihan dari video background

• Membuat website tampak lebih modern, styles, powerfull dan dapat menciptakan seni yang begitu indah dibandingi dengan menggunakan background image statis.
• Meningkatkan promosi bisnis melalui video tersebut.
• Dapat menarik perhatian pengguna.

Kekurangan dari video background

• Video Background tidak dapat diputar secara otomatis di mobile. Kenapa video background tidak dapat berputar secara otamis di mobile? Nah dari sumber yang telah didapatkan bahwa pengembang OS setiap smartphone dan tablet sengaja menonaktifkan pemutaran otomatis pada perangkat seluler untuk melindungi bandwidth pengguna.

• Menghabiskan banyak kouta internet untuk penggunaan di mobile.
• Tampilan video backgroud pada saat dimobile akan menjadi seperti  gambar dibawah ini, hanya ada background warna abu-abu dikarekan video background tidak berfungsi di mobile.

Naah tenang penulis punya solusi untuk masalah yang ada diatas. Bagaimana cara menampilkan video background di mobile? tentunya video background tersebut tidak akan berputar secara otomatis dimobile. Penulis punya solusi lain yaitu video background akan berputar ketika penggunaka menekan tombol play video untuk memutar videonya. Dimana solusi tersebut penulis dapatkan dari sebuah sumber dibawah ini yang penulis beri garis hijau yang menyatakan bahwa video background harus di click terlebih dahulu untuk memutarnya.

Video Background Autoplay On Desktop

Sebelum kita memberikan solusi untuk mobile, kita mulai terlebih dahulu untuk yang dekstop terlebih dahulu. Berikut cara yang harus dilakukan:

• Masukkan video kamu kedalam media atau FTP.
• Masukkan script di bawah ini ke Raw HTML yang ada di visual composer untuk dekstop.

<style> #myvideo { position: absolute; top: 0; bottom: 0; min-width: 100%; min-height: 100%; } </style>
<video autoplay muted loop id=”myvideo”>
<source src=”/wp-content/themes/adbastiaanse/assets/video/video-homepage.mp4″ type=”video/mp4″> </video>

Video Background On Mobile

Nah bedanya script mobile dan dekstop adalah yang di mobile kita menggunakan poster gambar serta button untuk play videonya, sedangkan yang di dekstop tidak. Berikut cara yang harus dilakukan:

• Masukkan script di bawah ini ke Raw HTML yang ada di visual composer untuk mobile.

<style> #myVideo { position: absolute; top: 0; bottom: 0; min-width: 100%; min-height: 100%; object-fit: cover; } </style>
<div class=”video_poster”>
<video muted loop id=”myVideo” poster=”/wp-content/uploads/2018/07/baim-hanif-89800-unsplash.jpg”>
<source src=”/wp-content/themes/adbastiaanse/assets/video/video-homepage.mp4″ type=”video/mp4″></video>
</div> <button class=”play-video”> Play Video </button>

Ada tambahan javascriptnya niih untuk yang mobile, script dibawah gunanya adalah untuk membuat buttonnya saat diklik akan memutar videonya.

//document.getElementById(‘myVideo’).play(); jQuery(‘.play-video’).on(‘click’, function(){ document.getElementById(‘myVideo’).play(); })

Cukup mudah bukan?  Sekian penjelasan tentang video background, jika anda mengalami kesulitan atau memiliki masukan tambahan silahkan cantumkan dan ajukan pada kolom komentar di akhir artikel ini. Terimakasih