JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<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>

CSS

#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;
}

JavaScript

$(document).ready(function() {
		$('.custom-th').click(function() {
			$('.custom-th').fadeOut('fast', function() {
				$("#thevideo").css("display","block");
				});
			});
		});