Multiple wideos on same page (Projekktor Core)

by Mei, Tuesday, May 08, 2012, 18:26 (381 days ago)

I am using Projekktor with Fancybox in a Wordpress theme.

Here is the page: http://ennio.crumplepop[dot]com/a-fancybox-video-page/

This is the code I added before </head>:

<!-- Start Fancybox -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_url') ?>/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<link rel="stylesheet" href="<?php bloginfo('template_url') ?>/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
	<!-- End -->
	
	<!-- Start Projekktor -->
	<script type="text/javascript" src="/projekktor/projekktor-1.0.13r41.min.js"></script>
	<link rel="stylesheet" href="/projekktor/theme/style.css" type="text/css" media="screen" />
	<!-- End -->

<!-- Apply Projekktor to all HTML5 media elements -->
    <script type="text/javascript">
		$(document).ready(function() {
			var myPlayer = projekktor('video', {
				/* path to the MP4 Flash-player fallback component */
				playerFlashMP4:        '/projekktor/jarisplayer.swf',
				controls: false,
				autoplay: false,
				volume: 0.8
			});
			   
			var popup = $("#popup").fancybox({
				'onComplete':function(){
					myPlayer.reset();
					myPlayer.setPlay();
				},
				'onCleanup':function(){
					myPlayer.setStop();
				},
				'titlePosition'		: 'none',
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});
		});
	</script>

	<!-- End -->

And this is the code in my Wordpress page:

<div class="videolist">

<div class="videomodule">

	<a id="popup" href="#inline1" title="Fancybox meets Projekktor &lt;3">
		<img src="/promo/640/transimatic640.jpg" />
	</a>
	<div style="display: none;">
		<video id="inline1" class="projekktor" poster="/promo/640/transimatic640.jpg" title="This is Projekktor" width="640" height="360" controls>
		<source src="/wp-content/themes/grid_focus/images/bunny/TransiMatic-video-fixed.mp4" />
	</div>

</div>


<div class="videomodule">
        <a id="popup" href="#inline2" title="Fancybox meets Projekktor &lt;3">
		<img src="http://ennio.crumplepop.com/promo/640/platinotype640.jpg" />
	</a>
	<div style="display: none;">
		<video id="inline2" class="projekktor" poster="http://ennio.crumplepop.com/promo/640/platinotype640.jpg" title="This is Projekktor" width="640" height="360" controls>
		<source src="http://ennio.crumplepop.com/promo/platinotype-640x360.mp4" />
	</div>
</div>

</div>

For some reason though, the first video loads, but I cannot exit the fancybox. Autoplay also does not work...

Any insight would be really helpful!!