Advanced Search

Adding a Video a Overlay to HTML Page

/ Published in: JavaScript
Save to your folder(s)
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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <script type="text/javascript">
  2. var ytVideoSrc = "http://www.youtube.com/embed/uhDPkOrIKOQ";
  3. $(document).ready(function () {
  4. 	$('.video-wrap img[rel]').overlay({
  5. 		mask: {
  6. 			color: '#333',
  7. 			opacity: 0.5
  8. 		},
  9. 		top: 'center',
  10. 		fixed: true,
  11. 		onBeforeLoad: function () {
  12. 			$("#videoOverlay iframe").attr("src", ytVideoSrc )
  13. 		},
  14. 		onBeforeClose: function () {
  15. 			$("#videoOverlay iframe").attr("src", "#")
  16. 		}
  17. 	});
  18. });
  19. </script>
  20.  
  21. <!-- The following div tags goes in the HTML page in the body tag -->
  22. <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>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.