jQueryを使用してHTMLからYouTubeのサムネイルを生成

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"; 
    } 
} 

編集：問題は、各hrefに基づいてimgを動的に追加することです

Answer 1

ここでは、望ましい結果をもたらすデモです。

デモ：選択セット内のすべてのリンクを通じてjsFiddle

Each意志ループ。値を設定するには、html関数を使用する必要があります。ラップして関数から文字列を返すと、画像がページに設定されます。

Answer 2

簡単な答えを見つけるのは簡単ではありませんでした。

しかし、私は最終的にダイナミックなYouTubeのiframeで動作するようなものを考え出すことができました。

ここに行きます：[a link]（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');