Question

I’m trying to get the thumbnails from Youtube and insert the corresponding image into the html.

My HTML:

<div id="first">
    <ul class="thumbnails">
        <li><a href="http://www.youtube.com/watch?v=-dzpkn29_vY"></a></li>
        <li><a href="http://www.youtube.com/watch?v=xFCRMonf7lI"></a></li>
   </ul>
</div>

<div id="second">
    <ul class="thumbnails">
        <li><a href="http://www.youtube.com/watch?v=Ps-9L0-NO"></a></li>
        <li><a href="http://www.youtube.com/watch?v=hJZCHZ2wV7U"></a></li>
    </ul>
</div>

So I’d like the HTML to look like this:

<ul class="thumbnails">
  <li>
    <a href="http://www.youtube.com/watch?v=UBTUAHGpQqE">
      <img src="http://img.youtube.com/vi/-dzpkn29_vY/2.jpg" alt="#" />
    </a>
  </li>
  <li>
    <a href="http://www.youtube.com/watch?v=mTkPfjSXFpo">
      <img src="http://img.youtube.com/vi/xFCRMonf7lI/2.jpg" alt="#" />
    </a>
 </li>

Is there anyway I can use this function I found on SO:

function getScreen( url, size ) {
  if(url === null){ return ""; }

  size = (size === null) ? "big" : size;
  var vid;
  var results;

  results = url.match("[\\?&]v=([^&#]*)");

  vid = ( results === null ) ? url : results[1];

  if(size == "small"){
    return "http://img.youtube.com/vi/"+vid+"/2.jpg";
  } else {
    return "http://img.youtube.com/vi/"+vid+"/0.jpg";
  }
}

Edit: The problem is dynamically adding the img based off each a href

Answer 1

Here is a demo that gives you the desired result.

Demo: jsFiddle

Each will loop through all of the links within the selection set. To set the value you need to use the html function. Returning the string from the function with its wrapping will set the images onto the page.