This example shows two possible ways to combine the fancyboy jQuery plugin with Projekktor.
The first one uses fancybox´ 'inline'-concept the second one an iframe.
Inline
The player is initialized inline and starts automatically once the fancybox has opened and
stops as it gets closed.
iFrame
The player loads in an iframe, providing an embed-option and some social links.
display example´s source
<h3>Inline</h3>
<a id="inlinefb" href="#inline1" title="Fancybox meets Projekktor <3">
<img src="intro.png" width="219" height="128" />
</a>
<div style="display: none;">
<video id="inline1" class="projekktor" poster="intro.png" title="This is Projekktor" width="640" height="385" controls>
<source src="intro.mp4" type="video/mp4" />
<source src="intro.webm" type="video/webm" />
<source src="intro.ogv" type="video/ogg" />
</video>
</div>
<p>
The player is initialized inline and starts automatically once the fancybox has opened and
stops as it gets closed.
</p>
<h3>iFrame</h3>
<a id="iframefb" href="http://www.projekktor.com/projekktor.html">
<img src="intro.png" width="219" height="128" />
</a>
<p>
The player loads in an iframe, providing an embed-option and some social links.
</p>
<script type="text/javascript">
$(document).ready(function() {
var myPlayer = projekktor('video', {
controls: true,
debug: false,
loop: false,
autoplay: false,
plugins: ['Display', 'Controlbar'],
plugin_display: {
logoImage: "yourlogo.png",
onclick_playing: {
callback: 'openUrl', value: {url:'http://www.heise.de', target: '_self', pause: true}
}
}
}, function(player) {
// get-rid-of-the-fancybox-close-button-on-fullscreen-workaround
player.addListener('fullscreen', function(value) {
if (value==true)
$('#fancybox-close').hide();
else
$('#fancybox-close').show();
})
});
$("#inlinefb").fancybox({
'titlePosition' : 'none',
'transitionIn' : 'none',
'transitionOut' : 'none',
'onComplete' : function() {
myPlayer.setPlay();
},
'onCleanup' : function() {
myPlayer.setStop();
}
});
$("#iframefb").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
