Создание миниатюр YouTube из HTML с использованием jQuery

Question

Я пытаюсь получить эскизы с Youtube и вставить соответствующее изображение в html.

Мой 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>

Так что я бы хотел, чтобы HTML выглядел так:

<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>

Есть ли в любом случае, я могу использовать эту функцию, которую я нашел на 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: проблема заключается в динамическом добавлении IMG на основе каждого href

Answer 1

Вот демонстрация, которая дает желаемый результат.

Демо: jsFiddle

Each будет перебирать все ссылки в наборе выбора. Для установки значения вам необходимо использовать функцию html. Возврат строки из функции с ее переносом установит изображения на странице.

Answer 2

Найти простой ответ было нелегко.

Но я наконец-то смог придумать что-то, что могло бы работать с динамическими фреймами YouTube.

Вот, пожалуйста: [ссылка] (http://jsfiddle.net/9jgQU/)!

var iframeSrc = $('#idFrame').attr('src');
var url = iframeSrc;
url = url.split("/");
$("#la").attr("src",'http://img.youtube.com/vi/'+url[4]+'/mqdefault.jpg');