MY CODE (video PROTOTYPE).

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>Video Prototype</title>
<!-- CSS -->

<style type="text/css">
  @import url("css/css.css");
  @import url "css/css.css";
</style>

<link href="http://contribute.juicepharma.com/html5videomenu/example237/css/player.css" rel="stylesheet" type="text/css" />

<!-- Mobile Specific Meta Tags -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script type="text/javascript" src="http://use.typekit.com/yil2hux.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="http://contribute.juicepharma.com/html5videomenu/fancyapps-fancyBox-e4836f7/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="http://contribute.juicepharma.com/html5videomenu/fancyapps-fancyBox-e4836f7/source/jquery.fancybox.js?v=2.1.3"></script>
<link rel="stylesheet" type="text/css" href="http://contribute.juicepharma.com/html5videomenu/fancyapps-fancyBox-e4836f7/source/jquery.fancybox.css?v=2.1.2" media="screen" />

<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="http://contribute.juicepharma.com/html5videomenu/fancyapps-fancyBox-e4836f7/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="http://contribute.juicepharma.com/html5videomenu/fancyapps-fancyBox-e4836f7/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

<!-- The cuepoint stuff is here -->
<script src='http://contribute.juicepharma.com/html5videomenu/example237/js/cuepoint.js'></script>

<script src='http://contribute.juicepharma.com/html5videomenu/example237/js/script.js'></script>

<script>
$(document).ready(function(){
//Slides object with a time (integer) and a html string
var slides = {
0: '<div id="playdiv" onclick="vidplay()"><img src="imgs/poster1.png" style="min-height: 300px;"/></div>',
2: '<div id="playdiv" onclick="vidplay()"><img src="imgs/poster1.png" style="min-height: 300px;"/></div>',
3: '<div id="playdiv" onclick="vidplay()"><img src="imgs/poster1.png" style="min-height: 300px;"/></div>',
4: '',
5: '',
6: '<div id="playdiv" onclick="vidplay()"><img src="http://s3.freefoto.com/images/01/10/01_10_1_web.jpg" /style="min-height: 300px;"/></div>',
10:'<div id="playdiv" onclick="vidplay()"><img src="imgs/poster1.png" style="min-height: 300px;"/></div>',
}
//Start cuepoint and pass in our the subtitles we want
cuepoint.init(slides);

//You can set your own skip to links by using the cuepoint.setTime(seconds) function
$('#1').click(function(){ cuepoint.setTime(1)();});
$('#2').click(function(){ cuepoint.setTime(2)});
$('#3').click(function(){ cuepoint.setTime(6)});
$('#4').click(function(){ cuepoint.setTime(10)});
});

  // function vidplay() {
   //  var video = document.getElementById("video");
  //   var button = document.getElementById("play");
  //   if (video.paused) {
  //   video.play();


function vidplay() {
   var video = document.getElementById("video");
   var button = document.getElementById("play");
   if (video.paused) {
      video.play();
      $(playdiv).find('img').css("display","none");


       } else {
        video.pause();
        button.textContent = ">";
       }
    }

    $(document).ready(function() {
        $('.hover').bind('touchstart touchend', function(e) {
            e.preventDefault();
            $(this).toggleClass('hover_effect')

        });
    });

</script>

<script>
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);

var video = document.getElementById('video');
function doSomething(){ alert("works"); }
video.addEventListener("touchstart", video.play();
}, false);

</script>

<!-- End Cuepoint example code -->

</head>

<body>

<div id="page" style="position: relative; width: 700px; margin: 0 auto;">

<div id="container">

<header>

<hgroup>

<h1>Prototype..</h1>

</hgroup>

<br>
<br>

</header>

<!-- Start Cuepoint -->

<div class="vidBox" id="box">

	<section id='cuePlayer'>
		<video class="vid" id='video' height="300" width="500" onclick="vidplay()">
          <source src="http://contribute.juicepharma.com/html5videomenu/video/Scenario5-1.mp4" type="video/mp4" />
          <source src="http://contribute.juicepharma.com/html5videomenu/video/Scenario5-1.webm" type="video/webm" />
          <source src="http://contribute.juicepharma.com/html5videomenu/video/Scenario5-1.ogv" type="video/ogg" />
		</video>
		<div id='subtitles' style="position: absolute; min-height: 300px; margin-top: -300px;"></div>
	</section>
</div>

<!-- div Comes in at the end -->

    <div id="other" style="display: none; width:400px; height:300px;">

    <center><img src="http://gifs.gifbin.com/1233925271_8be9acc.gif"></center>

    </div>

<!-- / div Comes in at the end -->

	<div id="intro">

	</div>

	<div id='thumbs' style="margin-top: 155px;">
	<ul>
		<li id="one"><img id='1' src='imgs/marker.png' alt='cuepoint image' class='thumbnail' style="padding: 20px;"/><li>

		<li id="two"><img id='2' src='imgs/marker.png' alt='cuepoint image' class='thumbnail' style="padding: 20px;"/><li>

		<li id="three"><img id='3' src='imgs/marker.png' alt='cuepoint image' class='thumbnail' style="padding: 20px;"/><li>

		<li id="four"><img id='4' src='imgs/marker.png' alt='cuepoint image' class='thumbnail' style="padding: 20px;"/><li>
	</div>

	<footer>

<a id="various3" href="http://www.jquery.com" class="noScroll" name="various3"><div id="frame_btn">Push</div></a>


<div id="img1" style="background: black;">

</div>


<!-- Actual Play / Pause Button -->

<div style="margin-top: 25px; position: absolute;"><button id="play" onclick="vidplay()">&gt;</button></div>

<!-- / Actual Play / Pause Button -->


<script type="text/javascript">

$("#various3").fancybox({
	'width'                         : '500',
	'height'                        : '300',
	'autoScale'                     : false,
	'transitionIn'        		    	: 'none',
	'transitionOut'         	    	: 'none',
	'type'                          : 'iframe'
});

</script>

</footer>

</div>
</div>
</div>

</body>
</html>