Cara Membuat POP-UP Youtube Player

Ikhtisar

Ini adalah mudah untuk menggunakan jQuery Plugin untuk menanamkan video YouTube pada halaman Anda dengan menampilkan mereka dalam kotak popup dialog. Saya telah menggunakan jQuery UI Dialog Widget sebagai popup wadah bukannya menciptakan kembali roda. jQuery UI Dialog adalah mekanisme lintas-browser yang kuat untuk menampilkan kotak dialog popup dengan judul bar termasuk kotak bergerak dengan perilaku modal.

Ini adalah plugin yang sangat sederhana untuk mengkonfigurasi dan digunakan. Yang Anda butuhkan adalah link biasa ke halaman YouTube atau unsur-unsur lain seperti gambar atau tombol dengan YouTube Video Id disimpan dalam setiap atribut dari elemen DOM. Plugin ini melacak semua peristiwa popup ditugaskan dan tidak akan menetapkan acara klik jika ada sudah ada satu, dengan cara itu Anda dapat menetapkan kembali acara untuk secara dinamis menambahkan elemen HTML tanpa mempengaruhi yang sudah ada. Plugin ini secara otomatis mendapat gelar video dari YouTube untuk ditampilkan pada dialog judul kotak bar.

Anda dapat dengan mudah mengkonfigurasi pengaturan video YouTube dari pilihan konfigurasi yang merupakan perpanjangan dari YouTube Player Embedded Parameter , membiarkan Anda untuk menyesuaikan ukuran video dan pemutar sendiri pengaturan Anda. Video yang tertanam melalui gaya kode iframe embed baru yang mendukung kedua Flash dan HTML5 pemain ( More info ).

Persyaratan

Plugin ini dibangun di atas jQuery sehingga Anda perlu untuk memasukkan bahwa pada halaman Anda:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Anda juga akan membutuhkan jQuery UI tema perpustakaan untuk dialog. Anda dapat membangun satu kustom di http://jqueryui.com atau menggunakan tema yang ada. Anda bisa mendapatkan daftar lengkap tema default dan Google CDN link darihttp://lab.abhinayrathore.com/jquery_cdn/ .

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

Akhirnya menyertakan file Plugin YouTube Popup jQuery:

<script type="text/javascript" src="jquery.youtubepopup.min.js"></script>

YouTube URL atau YouTube Video Id:

Untuk link biasa Anda dapat menggunakan apapun YouTube URL standar untuk menanamkan plugin, tapi untuk elemen dom lain yang tidak mendukung atribut href, Anda akan memerlukan Video Id YouTube untuk menanamkan video. Anda bisa mendapatkan Video Id YouTube dari url seperti ditunjukkan pada screenshot ini (karakter antara "v =" dan "&" jika ada):

Contoh & Penggunaan

Cukup menginisialisasi Popup YouTube dalam acara buka halaman Anda seperti ini ...

$(function () {
 $("a.youtube").YouTubePopup(options);
});

Bagaimana struktur link:

Gunakan salah satu format URL YouTube berikut:

<a class="youtube" href="http://www.youtube.com/watch?v=4eYSpIz2FjU">title</a>
<a class="youtube" href="http://www.youtube.com/embed/4eYSpIz2FjU">title</a>
<a class="youtube" href="http://youtu.be/4eYSpIz2FjU">title</a>

Bagaimana struktur elemen DOM lainnya:

Masukkan file video id YouTube (bukan url) di "rel" atribut. Anda dapat menggunakan atribut lain untuk menyimpan YouTube Id, tetapi Anda akan perlu untuk menentukan "idAttribute" nama dalam konfigurasi Plugin.
Anda dapat menggunakan "title" atribut untuk menyimpan judul video dan menetapkan pilihan useYoutTubeTitle sebagai palsu untuk menggunakannya insted dari judul YouTube. Anda bahkan dapat mengganti judul dengan menetapkan sendiri dalam konfigurasi Plugin. "Title" nilai atribut akan diabaikan jika opsi useYoutTubeTitle diatur ke benar (yang merupakan default).

Contoh elemen DOM ...

<button class="youtube" id="4eYSpIz2FjU" title="...">Click me</button>

Menginisialisasi Popup YouTube dengan pilihan ...

$("a.youtube").YouTubePopup({ autoplay: 0, draggable: true });

Menetapkan YouTube Id menggunakan opsi Plugin ...

$("#youtubeLink").YouTubePopup({ youtubeId: '4eYSpIz2FjU', title: 'My New Title' });

<a id="youtubeLink" href="#">YouTube Link</a>

Gunakan atribut HTML lainnya:

Popup pada klik Gambar ...

$("img.youtube").YouTubePopup({ idAttribute: 'id' });

 <img class="youtube" id="4eYSpIz2FjU" src="..." title="..." />

Contoh:

Popup pada klik Tombol ...

$("button.youtube").YouTubePopup({ idAttribute: 'id' });

<button class="youtube" id="4eYSpIz2FjU" title="...">Click me</button>

Contoh:

Menggunakan atribut khusus untuk menyimpan YouTube Id ...

$("a.youtube").YouTubePopup({ idAttribute: 'youtube' });

<a class="youtube" youtube="4eYSpIz2FjU" href="#" title="...">Click me</a>

Contoh: Klik saya

Menyembunyikan Title Bar untuk Popup Dialog ...

$("a.youtube").YouTubePopup({ hideTitleBar: true });

<a class="youtube" rel="4eYSpIz2FjU" href="#">Click me</a>

Contoh: Klik saya

Auto-popup pada beban halaman

$(function () {
 $("a.youtube").YouTubePopup().click();
});

Untuk menonaktifkan plugin:

Untuk menghapus / menonaktifkan plugin, Anda dapat menggunakan opsi seperti ini menghancurkan:

$("a.youtube").YouTubePopup('destroy');

Video Thumbnail:

Untuk mendapatkan thumbnail video dari YouTube, gunakan salah satu URL ini di tag img:

http://img.youtube.com/vi/video-id/0.jpg
http://img.youtube.com/vi/video-id/1.jpg
http://img.youtube.com/vi/video-id/2.jpg
http://img.youtube.com/vi/video-id/3.jpg
http://img.youtube.com/vi/video-id/default.jpg
http://img.youtube.com/vi/video-id/hqdefault.jpg
http://img.youtube.com/vi/video-id/maxresdefault.jpg

<img class="youtube" id="4eYSpIz2FjU" src="http://img.youtube.com/vi/4eYSpIz2FjU/1.jpg" title="..." />

Contoh:

Pilihan konfigurasi

//default configuration

$.fn.YouTubePopup.defaults = {
 'youtubeId': '',
 'title': '',
 'useYouTubeTitle': true,
 'idAttribute': 'rel',
 'cssClass': '',
 'draggable': false,
 'modal': true,
 'width': 640,
 'height': 480,
 'hideTitleBar': false,
 'clickOutsideClose': false,
 'overlayOpacity': 0.5,
 'autohide': 2,
 'autoplay': 1,
 'color': 'red',
 'color1': 'FFFFFF',
 'color2': 'FFFFFF',
 'controls': 1,
 'fullscreen': 1,
 'loop': 0,
 'hd': 1,
 'showinfo': 0,
 'theme': 'light',
 'showBorder': true

};youtubeId: Gunakan untuk mengganti YouTube Id menggunakan JavaScript.

title: Override teks judul. Untuk mendapatkan gelar dari YouTube, biarkan kosong.
useYouTubeTitle: (default: true) Mendapat gelar video dari YouTube. Pilihan ini tidak akan bekerja jika judul ditimpa menggunakan pilihanjudul di atas.
idAttribute: (default: rel) Atribut yang berisi YouTube Id.
CssClass: (default: string kosong) Atribut yang berisi kelas CSS yang akan ditugaskan ke popup div.
draggable: (default: false) Jika diatur ke benar, dialog akan draggable oleh judul bar.
modal: (default: true) Jika diatur ke benar, dialog akan memiliki perilaku modal; item lainnya pada halaman tersebut akan dinonaktifkan (yaitu tidak dapat berinteraksi dengan). Modal dialog membuat overlay bawah dialog tetapi di atas elemen halaman lainnya.
width: (default: 640) Lebar pemutar YouTube.
height: (default: 480) Ketinggian pemutar YouTube.
hideTitleBar: (default: false) Sembunyikan Title Bar dari Dialog Widget. (Hanya bekerja dengan Modal pilihan diaktifkan.)
clickOutsideClose: (default: false) Menutup Popup Dialog saat diklik di luar di overlay Modal. (Hanya bekerja dengan Modal pilihan diaktifkan.)
overlayOpacity: (default: 0.5) Mengatur nilai opacity (dari 0 ke 1) untuk overlay Dialog Widget.
showBorder: (default: true) Untuk menampilkan atau menyembunyikan perbatasan di sekitar kotak dialog.
Sisa dari pilihan yang digunakan untuk mengkonfigurasi pemutar YouTube. Untuk bantuan lebih lanjut tentang pilihan ini, silakan lihatYouTube Player Embedded Parameter di situs API YouTube.

Mengatur default global yang ...

Anda bahkan dapat mengatur beberapa default global untuk website Anda dalam acara buka halaman seperti ini:

$(function () {
 $.fn.YouTubePopup.defaults.fullscreen = 0;
 $.fn.YouTubePopup.defaults.color1 = 'CCCCCC';
});

Kode Demo

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery YouTube Popup Player Plugin</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <link type="text/css"
  href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="jquery.youtubepopup.min.js"></script>
    <script type="text/javascript">
  $(function () {
   $("a.youtube").YouTubePopup({ autoplay: 0 });
  });
    </script>
</head>
<body>
 <a class="youtube" href="http://www.youtube.com/watch?v=4eYSpIz2FjU" title="jQuery YouTube Popup Player Plugin TEST">Test Me</a>
</body>
</html>