Calling Video With fancybox and XML

Question

I am wanting to use fancybox since shadowbox-js.com is no longer available. I use it for displaying images and videos. Right now I have my coding in shadowbox set so it uses a specific player that uses an old jwplayer skin that calls up an xml file that has the poster images and and videos in the xml file. The code I use is below:

<link rel="stylesheet" type="text/css" href="../shadowbox/shadowbox.css">
<script type="text/javascript" src="../shadowbox/shadowbox.js"></script>
<script type='text/javascript'> 
    Shadowbox.init({
language: 'en',
players:  ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv', 'mp4', 'php'],
overlayOpacity: '0.90',
continuous: 'true',
counterType: 'default',
animSequence: 'wh',
handleOversize: 'resize',
modal: 'false',
flashVars: {skin: '../jwplayer/skins/norden/norden.zip'}
 
                       });
</script>

The link coding for calling up the videos looks like:

<a href="/jwplayer/player.swf?file=videos/xml/jw_player2.xml" rel="shadowbox[Mixed];width=1280;height=720" title="World of Tanks - Official Video Trailers"><img src="images/wot-logo-dark-w-101-logo-600x253.png" border="0" width="600" height="253" title="" alt="101 ABGC Logo" /></a>

You can see an example of what I am talking about at http://101abgc.mywebteks.net/ just click the World of Tanks logo to see what I am talking about.

I want to be able to do the same thing with fancybox as I do with shadowbox for calling up the xml file to play the videos and still use the jwplayer skin I have in the code. Is this possible with fancybox?

Answer 1

The way I use jwplayer with fancybox is by putting the jwplayer code inside of a hidden div that also has the fancybox div and then the link will link to that inner div.

<a href="#video" id="popup" title="World of Tanks - Official Video Trailers">
    <img src="images/wot-logo-dark-w-101-logo-600x253.png" border="0" width="600" height="253" title="" alt="101 ABGC Logo" />
</a>

<div style="position:absolute; display:none;">
<div id="video" style="overflow: hidden;">
    <div id="fancy">
        &nbsp;</div>
    <script type="text/javascript">
jwplayer('fancy').setup({
        'width': '100%',
        'height': '16:9',
        'file': '[insert video file here]',    
        'image': '[insert video still here]',
        'autostart': 'false',
        'skin': '/jwplayer/player.swf?file=videos/xml/jw_player2.xml',
    });
  </script>
  </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $("#popup").fancybox({ // matches the selector of the fancybox links
        'titlePosition' : 'inside',
        'transitionIn' : 'none',
        'transitionOut' : 'none',
        'autoScale' : false,
        'autoDimensions' : false
        });
});
</script>