TUTORIAL JADIKAN VIDEO YOUTUBE MENJADI BECKGROUND WEBSITE

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 saya akan memberikan contoh penggunaan nya, yaitu menaruh video sebagai background website, disini video yang digunakan adalah video youtube agar tidak memakan bandwidth hosting.

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 strukturHTML 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

1

</pre>

2	<div id="wrapper"><header>

3	<h2>Make Youtube Video As Background Website <small>   <a href="http://www.candra-tutorial.blogspot.com">tutorial-webdesign.com</a></small></h2>

4	Video: Dear God by Avenged Sevenfold | <a href="#">back to tutorial</a></header></div>

5

<pre>

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.

1

*{

2	padding: 0;margin: 0;

3

}

4

a{

5	text-decoration: none;

6	color: orange;

7

}

8

body{

9	font-family: 'Patrick Hand SC', cursive;

10	overflow: hidden; /* optional */

11

}

12

#wrapper{

13	background: transparent url(img/pattern.png) repeat top left;

14

}

15

header{

16	padding: 10px 20px;

17	color: #f4f4f4;

18

}

19	header h2{

20	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 1px #fff;

21

}

22	header small{

23	font-size: 14px;

24

}

Javascript

Untuk menjalankan jquery tubular agar video dimainkan didiv ID #wrapper maka kita tuliskan script javascript (jquery) berikut.
Letakan script berikut tepat diatas /head.

1	$().ready(function() {

2	$('#wrapper').tubular({videoId: 'mzX0rhF8buo', mute: false, ratio: 4/3}); // where idOfYourVideo is the YouTube ID.

3

});

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 bagianvideoID 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)

sumber : http://www.tutorial-webdesign.com/menjadikan-video-youtube-sebagai-background-website/