Advanced Search

Return to Snippet

Revision: 58851
at August 7, 2012 01:33 by ptlrikin
Initial Code 
<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>
Initial URL 
http://codepen.io/j_shb/pen/hJKaEa
Initial Description 
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
Initial Title 
Adding a Video a Overlay to HTML Page
Initial Tags 
javascript
Initial Language 
JavaScript