Javascript jQuery视频点击图像播放动作视频（YT播放器上带有占位符）

我正在尝试单击一个div中的缩略图，以将另一个div中的嵌入式youtube视频（作为iframe嵌入）作为全尺寸视频播放。我已经做到了这一点，但是当页面加载时，我需要一个静态图像来代替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>

JS-Bin





// 

我很难理解您希望发生什么。离这儿近吗？对不起，我的解释不好-我想点击一个小图像，它会触发一个youtube嵌入式视频在另一个div（大格式-不是全屏）中播放。我希望在视频未激活时（即在页面加载时或视频播放结束后）在视频播放器上显示不同的图像-非常感谢在这方面提供的任何帮助。我不确定前面的例子是我想要的（考虑到我糟糕的要求，这是意料之中的。）谢谢