2014/12/12

【JavaScript】YouTubeのサムネをクリックでiframeに入れ換える

サイトにYouTubeの埋め込みを入れすぎると読み込みが重くなることがあります。
そこでJavaScriptでクリックしてから、iframeに切り替えるようにしてみようという試みです。

当方JavaScript初心者ですので間違えがあってもご容赦を。
コメントで教えてくれると幸いです。
function changeThumbnail(obj)
{
 var width  = 480;
 var height = 360;
 var pattern = /vi\/([^&]+)\//;
 var video_id  = obj.childNodes[0].src.match(pattern);
 var iframe = "<iframe width=\""+width+"\" height=\""+height+"\" src=\"http://www.youtube.com/embed/"+video_id[1]+"\" frameborder=\"0\" allowfullscreen></iframe>";
 obj.innerHTML = iframe;
}
<a href="https://www.youtube.com/watch?v=n7H4p0ArZUU">Mr.Children「フェイク」Music Video</a><br/>
<div onClick="changeThumbnail(this);"><img src="http://i.ytimg.com/vi/n7H4p0ArZUU/hqdefault.jpg"></div>

テストページ
jQueryを使えばもっと簡易化できそうです。