javascript - 画像をクリックして非表示にし、その下にあるビデオを再生するにはどうすればよいですか?

Question

動作する背景ホバー効果のある空白の画像 (blank.png) があります。画像をクリックすると非表示になり、ビデオ div が表示されます。私が理解できないのは、元の空白の画像をクリックしてビデオを再生する方法です。

ほとんどの方法で機能していますが、画像をクリックしてもビデオを再生できません。

私はスクリプト作成が得意ではありません。

私が行ったことの例: http://jsfiddle.net/3s8EC/2/

<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('.custom-th').click(function() {
        $('.custom-th').fadeOut('fast', function() {
            $("#thevideo").css("display","block");
            });
        });
    });
</script>

<style>
#imageID {background: url(http://edigi.co/Video-Intro.jpg) no-repeat;
height: 370px;
width: 100%;
}

#imageID:hover {
background: url(http://edigi.co/Video-Intro-Hover.jpg)  no-repeat;
}
</style>

<div style="width: 100%; height: 370px; background-color: #000;">

<div id="promovid">
    <div class="custom-th">
        <img src="http://edigi.co/blank.png" id="imageID" width="100%" height="370" />    
    </div>

    <div id="thevideo" style="display:none; padding: 0px;">
        <center>
        <video onclick="this.play();" preload="auto" width="600" height="370">
            <source src="http://edigi.co/Impatto_Branding_Agency-Large.mp4" type="video/mp4"/>
        </video>
        </center>
    </div>

</div>
</div>

どんな助けでも大歓迎ですが、私は実際の例のスクリプトを作成したり、jsfiddle を編集したりするのが得意ではないので、非常に素晴らしいでしょう。

助けてくれてありがとう。