javascript - jQuery 動画のクリック画像からアクション動画への再生 (YT プレーヤーのプレースホルダー付き)

Question

ある div のサムネイル画像をクリックして、別の div (iframe として埋め込まれた) に埋め込まれた YouTube ビデオをフルサイズのビデオとして再生しようとしています。そこまでは行きましたが、ページの読み込み時に YT プレーヤーが表示される代わりに、それを置き換える静止画像が必要です。私はjqueryに非常に慣れていませんが、ここで他のいくつかの回答からコードを作成したので、残りの画像と一緒に置換画像を行う方法に少し固執しています。どんな助けでも素晴らしいでしょう。

divの代わりにイメージマップでこれが機能する可能性はありますか?

<title>JS Bin</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">    
<div class="video_case">
   <iframe src="http://www.youtube.com/embed/oHg5SJYRHA0" width="560" height="315" allowfullscreen="" frameborder="0"></iframe>
</div>
<div class="video_wrapper">
   <ul>
      <li class="video_thumbnail">
          <a href="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&amp;controls=0" title="" class="video-1"><img src="/ProductImages_Display/PREVIEW/2/5172_31188_10523.jpg" border="0" width="180" height="268" style="border: 0;" /></a>
      </li>
   </ul>
</div>
<p>
  <script type="text/javascript">
  // <![CDATA[
    $(function() {
      $(".video-1").on("click", function(event) {
        event.preventDefault();
        $(".video_case iframe").prop("src", $(event.currentTarget).attr("href"));
      });    
    });
  // ]]>
  </script>
</p>