title: How to fetch thumbnail from youtube embed for blogger?
body: <p>I'm currently developing a tube template for blogger. The concept is that I will be placing the youtube embed code in the post and it will automatically fetch thumbnail.</p>
  
  <p>I've created summary post using below code (First thumb will be shown):</p>
  
  <pre><code>function removeHtmlTag(strx,chop){if(strx.indexOf("&lt;")!=-1){var s=strx.split("&lt;");for(var i=0;i&lt;s.length;i++){if(s[i].indexOf("&gt;")!=-1){s[i]=s[i].substring(s[i].indexOf("&gt;")+1,s[i].length)}}strx=s.join("")}chop=(chop&lt;strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&amp;&amp;strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID,pURL,pTITLE){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length&gt;=1){imgtag='&lt;div class="firstThumb"&gt;&lt;a href="'+ pURL +'" title="'+ pTITLE+'"&gt;&lt;img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/&gt;&lt;/a&gt;&lt;/div&gt;';summ=summary_img}var summary=imgtag+'&lt;div class="post-desc"&gt;'+removeHtmlTag(div.innerHTML,summ)+'&lt;/div&gt;';div.innerHTML=summary}    
  </code></pre>
  
  <p>In the post, I've included a thumbnail and embed code. I'm trying to make a function to fetch thumbnail from embed code rather than uploading manually.</p>
  
  <p>I'm creating the template from scratch. The link for my blog <a href="http://testingmicroviral.blogspot.com/" rel="nofollow noreferrer">http://testingmicroviral.blogspot.com/</a></p>
  
  <p>I was looking at the code below, but couldn't know how to implement it:</p>
  
  <pre><code>    var iframe           = $('iframe:first');
  var iframe_src       = iframe.attr('src');
  var youtube_video_id = iframe_src.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
  
  if (youtube_video_id.length == 11) {
      var video_thumbnail = $('&lt;img src="//img.youtube.com/vi/'+youtube_video_id+'/0.jpg"&gt;');
      $('body').append(video_thumbnail);
  
      $('img:first').click(function() {
          $('iframe:first').fadeToggle('400');
      });
  }    
  </code></pre>
  
  <p>I have no idea on how to implement to blogger. Can someone help me? Thanks.</p>