jQuery Fancy - popup window doesn't fully expand

Question

I am using jQuery Fancybox to display a number of Flash videos on a site and I am having trouble with the window not opening fully on the first click in Firefox. It works fine in other browsers.

Here is the jQuery:

<script type="text/javascript">
    $(document).ready(function() {
        $("a.videoLink").fancybox({
            'titleShow'  : false,
            'autoscale' : true,
            'width'  : '820',
            'height'  : '620',
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic'
            }); 
        });
    </script>

Here is the html:

<tr>
<td class="title"><a class="videoLink" href="#video-content30">CPR Lesson 1 Movie</a></td>
<td class="time">38:39</td>
<td class="video" style="display:none">
    <div id="video-content30">

            <script type='text/javascript'>
            var flashvars = {
            file: 'http://www.stockmarketcpr.com/smsys/link/CPR-Lesson-1-Movie.flv',
            id: '30'
            };
            var params = {
            wmode: 'opaque',
            bgcolor: '#CCCCCC',
            allowfullscreen: 'true',
            allowscriptaccess: 'always'
            };
            swfobject.embedSWF('http://www.stockmarketcpr.com/_flash/player.swf', 'player30','800','600', '9.0.0','expressInstall.swf', flashvars, params);

            </script>

            <div id="player30"></div>
    </div>      
</td>
</tr>

I end up getting a quarter inch high, full-width window on the first click. The second click plays fine.

I would appreciate any assistance.

Thank you!

Answer 1

If you use a fancybox pointing to inline content, make sure that in your CSS #video-content30 is styled with the wanted dimensions

Answer 2

I'm not sure if this is still relevant, but I know a few weeks ago I downloaded and installed Fancybox and was noticing an error with the elastic transition.

It turned out that the Fancybox source that was being used on the example site and the source provided for download were slightly different. I copied the source that was being used on the site and replaced mine and it worked fine.

Worth a try anyways. This has happened to me with a few jQuery plugins lately—seems developers aren't keeping their stuff synced proper.

Answer 3

I got some new code from the folks on the fancybox help forum.

For inline content, the code needs to be like this:

<a class="videoLink" href="http://www.myurl.com/_flash/player.swf?file=http://www.myurl.com/mydirectory/myMovie.flv"&gt;CPR Lesson 1 Movie</a>

Once I put that in place it worked like a charm.

Answer 4

If I place that link last postet in my code, the box shows up, but not with the video but just rubbish text. I just can't get a flv play in fancybox ... oh man :(