Menjadikan Video Youtube Sebagai Background Website

Abuser URL:http://www.tutorial-webdesign.com/wO3aO
June 10th, 2013 Tutorial, Web Design 29 Comments

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

<div id="wrapper"><header>
<h2>Make Youtube Video As Background Website <small>   <a href="http://www.tutorial-webdesign.com">tutorial-webdesign.com</a></small></h2>
Video: Dear God by Avenged Sevenfold | <a href="#">back to tutorial</a></header></div>

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.

	*{
		padding: 0;margin: 0;
	}
	a{
		text-decoration: none;
		color: orange;
	}
	body{
		font-family: 'Patrick Hand SC', cursive;
		overflow: hidden; /* optional */
	}
	#wrapper{
		background: transparent url(img/pattern.png) repeat top left;
	}
	header{
		padding: 10px 20px;
		color: #f4f4f4;
	}
	header h2{
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 1px #fff;
	}
	header small{
		font-size: 14px;
	}

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.

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

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

Follow @tut_web

Tags:

Sort URL http://www.tutorial-webdesign.com/wO3aO
Back To Top

Penulis :

Abuser

I'm just simple person, web developer part time, web design holic, website researcher. Work in the world of websites & coding for eat : View all posts by Abuser

Comments

29 thoughts on “Menjadikan Video Youtube Sebagai Background Website”

Bernard Duck says:

June 10, 2013 at 01:46

Keren gan tutornya… :)
nongkrong sini mulu bisa jago ntr…hehehe

Reply
- TWD Editorial says:
  
  June 10, 2013 at 01:49
  
  Sering-sering lah nongkrong disini kalo gitu :)
  
  Reply
  - Bernard Duck says:
    
    June 10, 2013 at 14:33
    
    Oke lah gan… :) (Y)
    
    Reply
Agusgt says:

June 10, 2013 at 10:41

Ditunggu Kunjungan Baliknya gan :)

Reply
agilBAKA says:

June 10, 2013 at 11:10

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

Reply
- TWD Editorial says:
  
  June 10, 2013 at 11:58
  
  Ini dicoba bisa kok, mungkin koneksi kamu sedang tidak bagus
  
  Reply
Membuat Tampilan Postingan Berbeda-beda Pada Wordpress Ala Blogazine | Tutorial Web Design says:

June 16, 2013 at 19:41

[…] Coba dibandingkan dengan ini: Menjadikan Video Youtube Sebagai Background Website. […]

Reply
Akmal Fahrurizal says:

June 16, 2013 at 22:42

Cieh A7X :D

Reply
- TWD Editorial says:
  
  June 16, 2013 at 22:44
  
  knp?
  
  Reply
candra says:

July 3, 2013 at 20:59

nice info gan
mampir ya ardiyaajicandra.blogspot.com

Reply
Kang Kapuk says:

August 23, 2013 at 08:02

Mau tanya Bang….

Itu code yang untuk Body, benar tag penutupnya dulu untuk , baru ditutup dengan tag pembuka begitu…..?

Nuhun atas jawabannya…..

Reply
- TWD Editorial says:
  
  August 23, 2013 at 08:12
  
  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
  
  Reply
dafi says:

August 23, 2013 at 08:11

keren.. nanti ane coba gan.
ternyata admin TWD fans A7x juga yah.. :D
seize the day pasti suka juga (y)

Reply
- TWD Editorial says:
  
  August 23, 2013 at 13:39
  
  haha suka, So far away juga suka
  
  Reply
joe says:

September 24, 2013 at 12:17

kalo video musicnya itu pake playlist gimana?
biar ganti ganti lagunya
http://www.youtube.com/watch?v=xSi_FE52TAY&list=RD02xSi_FE52TAY

Reply
- TWD Editorial says:
  
  September 24, 2013 at 12:22
  
  Tidak disarankan karena nanti terlalu berat kalau user harus disuruh streaming banyak video
  
  Reply
HandOfficial says:

December 13, 2013 at 09:35

Gan, kalau buat backgroundnya bukan pake youtube gimana ya gan syntaxnya kira2?

Thank’s sebelumnya :)

Reply
- TWD Editorial says:
  
  December 14, 2013 at 09:01
  
  ya tinggal dihilangkan saja video nya, diganti dengan background gambar :) atau background lain yang diinginkan
  
  Reply
wen pante says:

March 5, 2014 at 13:54

Mantaps =))

Reply
yuzz says:

June 7, 2014 at 19:46

gan klo di localhost video nya gk muncul itu kenapa ya ?
gambar semut munculnya

Reply
- TWD Editorial says:
  
  June 8, 2014 at 19:20
  
  mungkin salah settingan atau salah path
  
  Reply
yuzz says:

June 7, 2014 at 20:01

gan ,, klo di tambahin tombol play n pause gmn ya caranya ?
thx for respon

Reply
- TWD Editorial says:
  
  June 8, 2014 at 19:21
  
  gak bagus kalo dikasih play untuk background web, kalau mau pake play ya embed iframe nya youtube aja
  
  Reply
  - Andre says:
    
    July 16, 2014 at 00:16
    
    kalo video nya,bukan untuk background web nya,tp hnya dtampilkan dibagian tertentu,cara nya bgmn? trmksh.
    
    Reply
Tutorial Play Video Ketika Scroll dengan HTML5 dan Jquery | Tutorial Webdesign Indonesia says:

September 6, 2014 at 14:20

[…] Menjadikan Video Youtube Sebagai Background Website […]

Reply
Juan says:

May 16, 2015 at 12:53

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

Reply
- TWD Editorial says:
  
  May 17, 2015 at 23:17
  
  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
  
  Reply
  - wisnu says:
    
    July 30, 2015 at 16:15
    
    script nya udah di download tapi ngk bisa di buka
    
    Reply
Dio says:

April 25, 2016 at 09:55

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?

Reply