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 :)


8 komentar:

  1. sip....., kapan kapan praktek ah

    BalasHapus
  2. bisa mengurangi berat blog juga kalau gitu, mantep gan.. kalau bikin fancy box buat cbox gimana ia? :)

    BalasHapus
  3. pelintas batas, alief
    sip
    :D


    Googlid | Googlenya Blogger Indonesia
    tunggu saja tulisan selanjutnya sob
    :)

    BalasHapus
  4. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  5. kok ga jalan di blog ku gan

    BalasHapus
  6. nak letak dimana codenya ini? javascripa atau apa?

    BalasHapus
  7. kalo pasang audioplayer apa kodenya bos?

    BalasHapus

Formulir Kontak

Nama

Email *

Pesan *

[ Instagram M2D ]

[ Favorit ]

Malam Marah Malam Ramah

Apalah yang istimewa dengan malam? malam tak lebih dari kegelapan yang menyelimuti sesuatu yang tak pantas menikmati kelembutan cahaya, kera...

[ Referral ]

Ardhiansyam | Kontak | Sitemap | ke atas ↑