advanced code snippet search

Posted By

ptlrikin on 08/07/12


Tagged

javascript overlay


Versions (?)

Adding a Video a Overlay to HTML Page

 / Published in: JavaScript
 

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.

Expand | Embed | Plain Text 
  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>

Report this snippet  

You need to login to post a comment.