bikin Tombol Play Close popUP Youtube menggunakan JavaScript

OK Manteman-teman, Youtube merupakan konsumsi buat anda para pengguna internet, selain buat hiburan dan turing anda di dunia maya. Tentunya sangat menarik jika anda bisa memasang video youtube anda di web anda.

untuk vareasi pemasangan video youtube anda maknyusBLOGGER akan berbagi trik Pemasangan kode Popup youtube menggunakan JavaScript, Jadi untuk alasan itu saya telah mempermudah untuk menggunakan jendela PopUP Youtube yang dapat di pasang secara dinamis ke dalam halaman web anda dengan mengeklik Tombol Play.

Menggunakan tag konsep popup div dari posting berikutnya yang telah dimodifikasi untuk membuat tag div dinamis menggunakan JavaScript yang membuat lebih mudah untuk pemasangan beberapa video pada halaman anda tanpa menciptakan wadah div statis untuk video tersebut.

Untuk Pemasangan video anda hanya perlu membuat segala jenis gambar atau link teks yang disebut JavaScript openYoutube () fungsi pada klik mous untuk membuat jendela popUP yang dinamis akan terbuka. Seperti berikut ini:

<a href="#" onclick="openYouTube('video_id')">Video Title</a>

Dimana Video_id dapat kita temukan dari URL youtube seperti yang kita lihat dalam kode warna merah di bawah ini :
http://www.youtube.com/watch?v=_AJ0SkbPxAk
http://www.youtube.com/watch?v=EuAVgWJ28Hw&feature=related
Video Id terdiri dari semua karakter diantara "V=" dan "&"(jika ada)

Keuntungan menggunakan Popup Youtube ini:

Sangat rinagn
Pemasangan kode youtube jendela popup hanya dengan memanggil openYoutube () fungsi dari link/tombol.
Ukuran Youtube sangat mudah di sesuaikan dalam fungsi JavaScript.
Tidak ada tag DIV statis diperlukan untuk setiap klik link Youtube

Dibawah ini adalah contoh PopUP yaoutube terlihat seperti gambar di bawah ini :

LIHAT DEMO

Terbuka youtube fungsi berisi parameter Youtube disesuaikan seoerti lebar Video &tinggi. kontrol layar penuh, kontrol auto play dan kontrol playback definisi tinggi.
anda dapat memodifikasi fungsi ini bebas semua parameter Youtube ini sebagai parameter fungsi di open Youtube (yang akan memberikan anda kontrol individu atas semua video pada web anda.
Popup YouTube Player JavaScript code:

<script language="javascript">
function openYouTube(id){
      //YouTube Player Parameters
      var width = 640;
      var height = 505;
      var FullScreen = "yes";
      var AutoPlay = "yes";
      var HighDef = "yes";

      //Calculate Page width and height
      var pageWidth = window.innerWidth;
      var pageHeight = window.innerHeight;
      if (typeof pageWidth != "number"){
      if (document.compatMode == "CSS1Compat"){
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
      } else {
            pageWidth = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
            }
      }
      // Make Background visible...
      var divbg = document.getElementById('bg');
      divbg.style.visibility = "visible";

      //Create dynamic Div container for YouTube Popup Div
      var divobj = document.createElement('div');
      divobj.setAttribute('id',id); // Set id to YouTube id
      divobj.className = "popup";
      divobj.style.visibility = "visible";
      var divWidth = width + 4;
      var divHeight = height + 20;
      divobj.style.width = divWidth + "px";
      divobj.style.height = divHeight + "px";
      var divLeft = (pageWidth - divWidth) / 2;
      var divTop = (pageHeight - divHeight) / 2 - 10;
      //Set Left and top coordinates for the div tag
      divobj.style.left = divLeft + "px";
      divobj.style.top = divTop + "px";

      //Create dynamic Close Button Div
      var closebutton = document.createElement('div');
      closebutton.style.visibility = "visible";
      closebutton.innerHTML = "<span onclick=\"closeYouTube('" + id +"')\" class=\"close_button\">X</span>";
      //Add Close Button Div to YouTube Popup Div container
      divobj.appendChild(closebutton);

      //Create dynamic YouTube Div
      var ytobj = document.createElement('div');
      ytobj.setAttribute('id', "yt" + id);
      ytobj.className = "ytcontainer";
      ytobj.style.width = width + "px";
      ytobj.style.height = height + "px";
      if (FullScreen == "yes") FullScreen="&fs=1"; else FullScreen="&fs=0";
      if (AutoPlay == "yes") AutoPlay="&autoplay=1"; else AutoPlay="&autoplay=0";
      if (HighDef == "yes") HighDef="&hd=1"; else HighDef="&hd=0";
      var URL = "http://www.youtube.com/v/" + id + "&hl=en&rel=0&showsearch=0" + FullScreen + AutoPlay + HighDef;
      var YouTube = "<object width=\"" + width + "\" height=\"" + height + "\">";
      YouTube += "<param name=\"movie\" value=\"" + URL + "\"></param>";
      YouTube += "<param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param>";
      YouTube += "<embed src=\"" + URL + "\" type=\"application/x-shockwave-flash\" ";
      YouTube += "allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"" + width + "\" height=\"" + height + "\"></embed></object>";
      ytobj.innerHTML = YouTube;
      //Add YouTube Div to YouTube Popup Div container
      divobj.appendChild(ytobj);

      //Add YouTube Popup Div container to HTML BODY
      document.body.appendChild(divobj);
}
function closeYouTube(id){
      var divbg = document.getElementById('bg');
      divbg.style.visibility = "hidden";
      var divobj = document.getElementById(id);
      var ytobj = document.getElementById("yt" + id);
      divobj.removeChild(ytobj); //remove YouTube Div
      document.body.removeChild(divobj); // remove Popup Div
}
</script>

Popup YouTube Div CSS code:

<style type="text/css">

</style>

HTML code to embed YouTube Popup windows:

<a href="#" onclick="openYouTube('_AJ0SkbPxAk')">Stewie Beats Brian</a><br />
<a href="#" onclick="openYouTube('EuAVgWJ28Hw')">Stewie Beats Brian Part-2</a><br />
<a href="#" onclick="openYouTube('aRn5-LQCg2s')">Family Guy - Puke-A-Thon</a><br />
<a href="#" onclick="openYouTube('5IQ9mpFZz9c')">Family Guy - Electric Man</a><br />
<div id="bg" class="popup_bg"></div>

Anda dapat menempatkan CSS dan kode JavaScript di css terpisah dan file JS untuk menjaga kode HTML anda rapih dan bersih, Oly sekian semoga berhasil.

Anda baru saja membaca artikel tentang - bikin Tombol Play Close popUP Youtube menggunakan JavaScript. Silahkan baca artikel berikutnya Tentang - - Jangan lupa g+1 / fb / twit :)