jQuery video clicking image to action video play (with placeholder on YT player)

jQuery video clicking image to action video play (with placeholder on YT
player)

I'm trying to click a thumbnail image in one div to play an embedded
youtube video in another div (embedded as iframe) as a full size video.
I've gotten that far, but instead of the YT player showing when the page
loads i need a static image to replace it. I'm very new to jquery but have
created the code from a few other answers on here so am a bit stuck on how
to do the replacement image along with the rest of it. any help would be
amazing.
any chance of any of this working on image maps instead of divs?
<title>JS Bin</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.9.1.min.js">// <![CDATA[
// &lt;![CDATA[
&nbsp;
// ]]&gt;
// ]]></script>
</p>
<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>