I am trying to setup fancybox to show video. I would prefer with player but I am trying to do it with jwplayer to follow this example: jwplayer in fancybox not playing on ipad/iphone
However, I am not successful. Maybe you could help me out?
I am loading these:
<?php echo css('assets/fancybox/jquery.fancybox.css') ?>
<?php echo css('assets/jplayer/skin/blue.monday/jplayer.blue.monday.css') ?>
<?php echo js('http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js') ?>
<?php echo js('assets/fancybox/jquery.fancybox.js') ?>
<?php echo js('assets/fancybox/helpers/jquery.fancybox-media.js') ?>
<?php echo js('assets/js/fancybox.js') ?>
<?php echo js('assets/jwplayer/jwplayer.js') ?>
<?php echo js('assets/jwplayer/jwplayer.html5.js') ?>
In fancybox.js, I am doing this:
$(document).ready(function() {
$(".video_popup").fancybox({
fitToView: false,
scrolling: 'no',
content: '<div id="myvideo"></div>',
afterShow: function () {
jwplayer('myvideo').setup({
file: this.href,
autostart: 'true',
modes: [
{type: 'flash', src: 'assets/jwplayer/jwplayer.flash.swf'},
{type: 'html5', config: {file: this.href, provider: 'video'}},
]
});
}
});
I am calling the video like this:
<a href="spline-01.mp4" class="video_popup"> here to start movie no 11</a><br><div id="myvideo"></div>
I finally managed to solve this. Next: replacing jwplayer with jplayer.
<a class="jwVideo" spline-01.mp4" rel="group"> Preview </a>
$(function() {
$("a.jwVideo").click(function() {
var myVideo = this.href; // Dont forget about 'this'
$.fancybox({
padding : 0,
content: '<div id="video_container">Loading the player ... </div>',
afterShow: function(){
jwplayer("video_container").setup({
file: myVideo,
width: 640,
height: 385,
modes: [
{ type: 'html5' },
{ type: 'flash', src: 'assets/jwplayer/jwplayer.flash.swf' }
]
});
}
});
return false;
});
});