<script type="text/javascript">
var ytVideoSrc = "http://www.youtube.com/embed/uhDPkOrIKOQ";
$(document).ready(function () {
	$('.video-wrap img[rel]').overlay({
		mask: {
			color: '#333',
			opacity: 0.5
		},
		top: 'center',
		fixed: true,
		onBeforeLoad: function () {
			$("#videoOverlay iframe").attr("src", ytVideoSrc )
		},
		onBeforeClose: function () {
			$("#videoOverlay iframe").attr("src", "#")
		}
	});
});
</script>

<!-- The following div tags goes in the HTML page in the body tag -->
<div style="position: relative; z-index: 0; margin: 0 0 10px 10px;" class="video-wrap"><img src="/Portals/0/images/video-wuest.jpg" style="cursor: pointer" rel="#videoOverlay" alt="Play Video" /></div>

http://codepen.io/j_shb/pen/hJKaEa

The following javascript allows your to embed a video as a overlay on any HTML page. The script needs to be added in the head or external file, and the div tag needs to be placed on the page where you want the video image to show up.

Another option is - http://codepen.io/j_shb/pen/hJKaEa

Adding a Video a Overlay to HTML Page

javascript

JavaScript