Menjadikan video sebagai background website sudah menjadi trend belakangan ini, banyak web designer yang sudah menerapkan hal tersebut, dan terbukti hasilnya pun cukup bagus dan membuat website tampil menarik.
Biasanya website musisi, website promosi film atau website personal yang ada kaitannya dengan musik dan film cocok untuk menggunakan trik ini untuk menunjang tampilan website mereka.
Image by Salon.com
Di tulisan kali ini tutorial-webdesign.com akan memberikan contoh penggunaan nya, yaitu menaruh video sebagai background website, disini video yang digunakan adalah video youtube agar tidak memakan bandwidth hosting.
Artikel sebelumnya yang terkait
Mulai Dengan Peralatan.
Seperti biasa, sebelum memulai kita siapkan peralatan yang akan kita gunakan.
- Video dari Youtube (Dear God by Avenged Sevenfold).
- Google Webfont (Patrick Hand SC).
- Jquery Tubular.
Membuat Struktur HTML.
Setelah peralatan cukup, saat nya kita membuat struktur HTML nya, sebenarnya untuk membuat video youtube jadi background kita hanya memerlukan sebuah div dengan ID #wrapper
Head
Dibagian head dan /head kita sisipkkan google web font, jquery dan Jquery Tubular.
Sedangkan dibagian body, kita buat struktur berikut.
Body
CSS
Untuk tampilan website nya bisa disisipkan css, css ini silahkan disesuaikan dengan kebutuhan.
pada demo ini kami hanya mencoba menerapkan video sebagai background dan menempatkan elemen-elemen lain diatasnya.
Javascript
Untuk menjalankan jquery tubular agar video dimainkan di div ID #wrapper maka kita tuliskan script javascript (jquery) berikut.
Letakan script berikut tepat diatas /head.
Untuk menentukan video youtube yang ingin dimainkan maka ambil ID dari video youtube tersebut, misal video Avenged Sevenfold ini : https://www.youtube.com/watch?v=mzX0rhF8buo
ambil ID yang dicetak tabal dan letakan pada bagian videoID di javascript diatas.
Option lain yang dapat kita gunakan untuk pengaturan video dengan Jquery Tubular bisa dilihat dibawah ini.
- ratio: 16/9 // usually either 4/3 or 16/9 — tweak as needed
- videoId: ‘ZCAnLxRvNNc’ // toy robot in space is a good default, no?
- mute: true
- repeat: true
- width: $(window).width() // no need to override
- wrapperZIndex: 99
- playButtonClass: ‘tubular-play’
- pauseButtonClass: ‘tubular-pause’
- muteButtonClass: ‘tubular-mute’
- volumeUpClass: ‘tubular-volume-up’
- volumeDownClass: ‘tubular-volume-down’
- increaseVolumeBy: 10 // increment value; volume range is 1-100
- start: 0 // starting position in seconds
Hasil
Jika langkah-langkah diatas diikuti dengan benar maka video akan muncul seperti demo berikut, dan jika anda ingin mencobanya sendiri anda bisa download script nya.
Untuk menjalankan script ini harus terhubung Internet karena video berada di Youtube.
Demo | Download Script
Sekian
Sampai disini tutorial kali ini, semoga berguna untuk anda, silahkan gunakan trik ini untuk menambah pengalaman browsing di website anda (UX).
Salam Web Design & Development Indonesia
Image by Salon.com
Keren gan tutornya… :)
nongkrong sini mulu bisa jago ntr…hehehe
Sering-sering lah nongkrong disini kalo gitu :)
Oke lah gan… :) (Y)
Ditunggu Kunjungan Baliknya gan :)
githubnya ga bisa di download nih :/
dithub.com nya ga bisa di akses, mungkin koneksinya lagi jelek yah atau emang github nya lagi bermasalah ? :D hehe
Ini dicoba bisa kok, mungkin koneksi kamu sedang tidak bagus
[…] Coba dibandingkan dengan ini: Menjadikan Video Youtube Sebagai Background Website. […]
Cieh A7X :D
knp?
nice info gan
mampir ya ardiyaajicandra.blogspot.com
Mau tanya Bang….
Itu code yang untuk Body, benar tag penutupnya dulu untuk , baru ditutup dengan tag pembuka begitu…..?
Nuhun atas jawabannya…..
Yang maksudnya? itu sudah dihilangkan, kayaknya itu dibuat sama plugin wordpress di website TWd, harusnya itu tidak ada.
Coba lihat contoh kodenya aja, silahkan di download
keren.. nanti ane coba gan.
ternyata admin TWD fans A7x juga yah.. :D
seize the day pasti suka juga (y)
haha suka, So far away juga suka
kalo video musicnya itu pake playlist gimana?
biar ganti ganti lagunya
http://www.youtube.com/watch?v=xSi_FE52TAY&list=RD02xSi_FE52TAY
Tidak disarankan karena nanti terlalu berat kalau user harus disuruh streaming banyak video
Gan, kalau buat backgroundnya bukan pake youtube gimana ya gan syntaxnya kira2?
Thank’s sebelumnya :)
ya tinggal dihilangkan saja video nya, diganti dengan background gambar :) atau background lain yang diinginkan
Mantaps =))
gan klo di localhost video nya gk muncul itu kenapa ya ?
gambar semut munculnya
mungkin salah settingan atau salah path
gan ,, klo di tambahin tombol play n pause gmn ya caranya ?
thx for respon
gak bagus kalo dikasih play untuk background web, kalau mau pake play ya embed iframe nya youtube aja
kalo video nya,bukan untuk background web nya,tp hnya dtampilkan dibagian tertentu,cara nya bgmn? trmksh.
[…] Menjadikan Video Youtube Sebagai Background Website […]
Gan, saya coba di joomla koq tidak bisa ya,,,
saya sudah load js dan panggil video nya melalui adding custom js.
saya menggunakan template dari youjoomla.
apa tidak berlaku di joomla gan ?
Salam
harusnya tetap bisa berlaku dimana saja, namun mungkin ada cara tersendiri di joomla, maaf tidak bisa bantu karena kami tidak terlalu familiar dengan kode joomla
script nya udah di download tapi ngk bisa di buka
gan mau nanya , kan ini video yang ditampilkan lewat youtube dan harus online nah kalau mau manggil videonya yang sudah ada di laptop/pc gmna?