Memasang Video YouTube dengan JQuery Fancybox

Masih tentang Fancybox, ada salah satu fungsi yang belum sempat saya bahas pada beberapa tulisan sebelumnya, yaitu menampilkan klip video dari YouTube. Fungsi ini merupakan salah satu kelebihan Fancybox dibandingkan modal box yang lain. Hal ini tentunya akan lebih menarik daripada menempelkan klip video YouTube secara langsung ke dalam postingan (yang terlihat kurang rapi pada saat memuat halaman). Dengan menggunakan Fancybox, Anda dapat menampilkan pratinjau klip video yang ingin ditampilkan dengan menggunakan gambar (image), atau pun hanya menampilkan tautan berupa teks saja. Cukup dengan satu klik, video Anda akan tampil lebih bergaya dalam balutan efek JQuery Fancybox.

(klik gambar untuk melihat live demo)

Langsung saja, mari kita melangkah lagi

Langkah 1
Saya asumsikan Anda telah membaca (menerapkan) tulisan saya sebelumnya

Langkah 2
Tambahkan kode "youtube" berikut pada deretan <!-- Js Tambahan --> 

$(&quot;#youtube&quot;).click(function() {
$.fancybox({
&#39;padding&#39; : 0,
&#39;autoScale&#39; : false,
&#39;transitionIn&#39; : &#39;none&#39;,
&#39;transitionOut&#39; : &#39;none&#39;,
&#39;title&#39; : this.title,
&#39;width&#39; : 680,
&#39;height&#39; : 495,
&#39;href&#39; : this.href.replace(new RegExp(&quot;watch\\?v=&quot;, &quot;i&quot;), &#39;v/&#39;),
&#39;type&#39; : &#39;swf&#39;,
&#39;swf&#39; : {
&#39;wmode&#39; : &#39;transparent&#39;,
&#39;allowfullscreen&#39; : &#39;true&#39;
}
});

return false;
});


Langkah 3
Selanjutnya panggil video yang ingin ditampilkan dengan kode berikut

<a id="youtube" title="Judul Video Anda" href="http://www.youtube.com/watch?v=XXXXXXXXX&amp;fs=1">Judul Tautan Anda (dapat pula diisi dengan gambar)</a>


Kode yang berwarna oranye adalah alamat klip video Anda di YouTube, contoh jadinya seperti ini:

<a id="youtube" title="Dashboard Confessional - Belle Of The Boulevard" href="http://www.youtube.com/watch?v=DOE4CX3BNBM&amp;fs=1">Dashboard Confessional - Belle Of The Boulevard</a>


Bagaimana dengan ukuran video yang ditampilkan dalam Fancybox?
Anda dapat mengedit width dan heigth pada kode "youtube" di atas (default: 680x495)

Apakah video yang ditempelkan dengan Fancybox dapat ditampilkan pada mode layar penuh (fullscreen)?
Dapat, tapi bila Anda tidak menginginkan hal tersebut, hapus kode &amp;fs=1

Oke, semoga berhasil :)


Ardhiansyam | Find us on Google+ | Kontak | Follower? klik di sini | Sitemap | Versi Mobile | ke atas ↑