XtGem Forum catalog
Home » Article » Jquery » Menjadikan Video Youtube Sebagai Background Website

Menjadikan video YouTube sebagai background website

f_huda19   01 Juli 2015   21:52:19   0 Suka   Favorit

youtube background video

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!

DEMODOWNLOAD

KOMENTAR

Wapperbatak

Wapperbatak 01 Jul 15

Apakah wap xt bisa mendukung HTM5 master?

f_huda19

Admin 01 Jul 15

jgn panggil master lah.. :)
bisa.. HTML5 tidak didasarkan pada hosting, tapi browser

KIRIM KOMENTAR