Home
Guestbook
About
Message
Feed
Menjadikan video YouTube sebagai background di website merupakan sesuatu yg menakjubkan! apalagi jika website kita bertemakan web download video atau musik. Tentu dengan hadirnya background video akan menambah website kita semakin hidup. Dan dampaknya, visitorpun akan betah berlama-lama di situs kita.
Bagaimana sih cara membuat video YouTube sebagai background di website? Ternyata caranya tak sesusah seperti yg kita bayangkan sobat. Diluar sana sudah banyak bertebaran jQuery plugin yang sudah siap pakai, salah satu contohnya adalah "YTPlayer jQuery plugin" yang memang sudah terbukti kehandalannya.
YTPlayer adalah plugin jQuery yang memungkinkan Anda untuk menggunakan video YouTube sebagai background website Anda. Menggunakan atribut HTML5 data-* dan YouTube API. Anda juga dapat menggunakan plugin ini sebagai pemutar video normal untuk halaman web Anda.
Yaps, pada artikel kali ini kita akan coba menggunakan YTPlayer untuk mempermudah kita dalam membuat background video di website. Karena menurut Admin plugin ini memiliki pengaturan yang cukup lengkap dan paling populer dibandingkan plugin sejenis lainnya. Nah dibawah akan kita bahas cara penggunaan beserta parameter yg dibutuhkan.
Tambahkan jQuery Framework dan YTPlayer di situs Anda.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> <script type="text/javascript" src="inc/jquery.mb.YTPlayer.js"></script>
Tambahkan Css YTPlayer di situs Anda.
<link rel="stylesheet" type="text/css" href="css/YTPlayer.css" media="all"/>
Panggil plugin.
<script>
$(document).ready(function() {
$(".player").mb_YTPlayer(); });
</script>
Menjadikan YTPlayer sebagai background.
<a class="player" data-property="{videoURL:'BsekcY04xvQ', containment:'body', autoPlay:true, mute:true, startAt:0, opacity:1}">My Video</a>
Pengaturan selengkapnya dapat Anda lihat di bawah ini.
-
containment:"body"
Selektor CSS untuk mententukan letak background video. Jika tidak diisi maka background akan di letakkan di body, jika diisi dengan "self" maka background akan di letakkan di elmen selektor.
-
ratio:"16/9"
Menentukan aspek rasio pada video. "4/3", "16/9", atau "auto". Jika "auto" aspek rasio akan disesuaikan dengan getDataFromFeed.
-
videoURL:"YoutubeID"
-
playlistURL:"Youtube Playlist ID"
-
startAt:0
Atur mulai dari berapa detik video akan diputar.
-
stopAt:0
Pada detik keberapa video harus berhenti, jika diisi "0" video akan berjalan hingga selesai.
-
mute:true
-
vol:100
-
autoPlay:true
-
quality:"default"
Pengaturan untuk kualitas video, "small", "medium", "large", "hd720", "hd1080", "highres"
-
opacity:1
Tingkat keburaman video, antara 0 sampai 1.
-
addRaster:false
-
loop:true
Atur ke 'true' jika Anda menginginkan video diputar ulang ketika telah selesai, atau 'false' jika sebaliknya.
-
showControls:false
Opsi untuk menampilkan atau menyembunyikan kontrol video.
-
showAnnotations:false
-
showYTLogo:false
'false' untuk menyembunyikan logo YouTube, atau 'true' jika sebaliknya.
-
stopMovieOnClick:false
-
stopMovieOnBlur:true
-
realfullscreen:true
Mengatifkan mode HTML5 fullscreen.
-
gaTrack:true
Mengaktifkan even Google Analytics untuk pemutar video tersebut.
-
onReady:function(respon) {}
Sebuah fungsi yg akan dijalankan ketika video telah berhasil dimuat.
Semua pilihan dapat diatur hanya dengan menggunakan atribut data-* Selamat Mencoba!
