Selamat Datang

Menjadikan Video Youtube Sebagai Background 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.

Movie background

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





Penulis :

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

  1. Bernard Duck says:

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

  2. Agusgt says:

    Ditunggu Kunjungan Baliknya gan :)

  3. agilBAKA says:

    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

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

  5. candra says:

    nice info gan
    mampir ya ardiyaajicandra.blogspot.com

  6. Kang Kapuk says:

    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

  7. dafi says:

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

  8. joe says:

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

  9. HandOfficial says:

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

    Thank’s sebelumnya :)

  10. yuzz says:

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

  11. yuzz says:

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

  12. Juan says:

    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

  13. Dio says:

    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?

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development