Trick for Embed Video YouTube to be More Efficient

Ada tutorial dan trik keren punya mengenai seputaran penerapan embed youtube. Seperti yang di ketahui jika kita mau membawa satu embed full dari web lain pasti memakai syntax iframe! Itulah salah satu fungsi dari atribut iframe. Sekarang apa jadinya jika variabel iframe yang akan kita ambil lebih dari satu bahkan bisa berpuluh-puluh? Satu embed iframe saja file yg terpanggil sebesar ± 400kB. Berikut screenshot prakiraan jumlah size pemanggilan 1 iframe video youtubeMenjadikan beban bertambah berat >:) Oleh karena itu bagi blogger yang blognya berisikan konten embed video terutama dari web youtube, mari cari tahu bagaimana solusinya ;)

Trik berikut khusus embed dari web youtube

Masukan script diatas tag </body>

<script>
//<![CDATA[
var i, c, y, v, s, n;
v = document.getElementsByClassName("youtube");
if (v.length > 0) {
  s = document.createElement("style");
  s.type = "text/css";
  s.innerHTML = '.youtube{background-color:#000;max-width:100%;overflow:hidden;position:relative;cursor: pointer}.youtube .thumb{bottom:0;display:block;left:0;margin:auto;max-width:100%;position:absolute;right:0;top:0;width:100%;height:auto}.youtube .play{opacity:.7;left:50%;margin:-38px 0 0 -38px;position:absolute;top:50%;height:77px;width:77px;background:url("PLAY-BUTTON-77x77.PNG") no-repeat}';
  document.body.appendChild(s)
}
for (n = 0; n < v.length; n++) {
  y = v[n];
  i = document.createElement("img");
  i.setAttribute("src", "http://i.ytimg.com/vi/" + y.id + "/hqdefault.jpg");
  i.setAttribute("class", "thumb");
  c = document.createElement("div");
  c.setAttribute("class", "play");
  y.appendChild(i);
  y.appendChild(c);
  y.onclick = function () {
    var a = document.createElement("iframe");
    a.setAttribute("src", "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1");
    a.style.width = this.style.width;
    a.style.height = this.style.height;
    this.parentNode.replaceChild(a, this)
  }
};
//]]>
</script>

Pasang link image pada kode yg bertuliskan PLAY-BUTTON-77x77.PNG
Markup HTML<div style="margin:1em auto;width:370px">
<div class="youtube" id="LcIytqkbdlo" style="width:370px;height:278px;">
</div>
</div>Gantikan ID LcIytqkbdlo dengan ID video tujuan!
DEMO

Urusan script bisa sobat hosting. Begitulah tut's metode embedding lebih efisien untuk video youtube :)

Trick selanjutnya masih seputar embed video youtube. Kali ini bagaimana memulai video youtube dengan waktu yang sudah kita kondisikan terlebih dahulu! Pada umumnya kalau kita memencet tombol play video youtube pasti akan dimulai pada waktu 0 detik. Lantas kalau kita mau memulai dari menit ke 17 bagaimana? Mau tidak mau ya kita tarik tanda laju streamingannya kan! Dengan trik yg akan gue share, sobat bakal bisa melakukan start dan finish sesuka hati :p
JavaScript youtube embed code

<script>
//<![CDATA[
/*
  YouTube Embed Code
  Author:   Amit Agarwal 
  Blog:     www.labnol.org
  Date:     04/15/2013
*/
  
  var node = "youtube-player";
  var youtube = document.createElement('script');
  youtube.type = "text/javascript";
  youtube.src = "//www.youtube.com/iframe_api";
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(youtube, s);
  
  var player;
  var params = document.getElementById(node);
  var startTime = params.getAttribute("startTime");
  var endTime = params.getAttribute("endTime");
  var videoID = params.getAttribute("videoID");
  var playerHeight = params.getAttribute("height");
  var playerWidth = params.getAttribute("width");
  
  function onYouTubeIframeAPIReady() {
    player = new YT.Player(node, {          
      height: playerHeight,
      width: playerWidth,
      playerVars: {'rel': 0, 'showinfo': 0, 'hidecontrols': 1 },
      events: {
        'onReady': loadVideo
      }
    });
  }
  
  function loadVideo(e) {      
    e.target.cueVideoById({ 
      videoId: videoID,
      startSeconds: startTime,
      endSeconds: endTime
    });
  }
//]]>
</script>

Markup HTML<div style="margin:5px auto;width:370px">
<div videoID="t2MOwQ089eQ" startTime="1333" endTime="1444" height="278" width="370" id="youtube-player">
</div>
</div>Gantikan videoID dengan ID video tujuan. Isikan startTime waktu untuk memulai dan endTime untuk waktu berhenti.
Jika kurang jelas silahkan kunjungi sumber how to embed youtube videos without increasing page load time & how to embed a part of a youtube video in your website
Thanks a lot Mr Amit Agarwal :)
Happy coding \m/