I'm using JQuery plugins Fancybox and JSVideo, ultimately i want a video to popup via fancybox and have the HTML5 video play in that popup

I have this working - the only problem is that the video controls are not what i expect...it does not have the jsvideo controls..i dont know if its a fancybox or a css thing, or both

The html is simple - its a thumbnail that points to javascript

 <a title=test name=test href=javascript:; class=fancyvideo5><img alt=kirk monteux micro-agentur.de grafik design src=http://www.micro-agentur.com/media/bilder/grafik220.jpg /></a>     

and the javascript looks like this:

<script type=text/javascript>



    $(document).ready(function () {





        $(a.fancyvideo5).click(function () {

            var url = $(this).attr('name');



            $.fancybox({

                'padding': 7,

                'overlayOpacity': 0.7,

                'autoDimensions': false,

                'width': 640,

                'height': 480,

                'content': '<div><div class=video-js-box vim-css>' +

                            '<video id=example_video_1 class=video-js width=635 height=475 controls=controls preload=auto poster=' + url + '.png>' +

                            '<source src=' + url + '.mp4 />' +

                            '<source src=' + url + '.webm />' +

                            '<source src=' + url + '.ogv  />' +

                              '<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->' +

                              '<object id=flash_fallback_1 class=vjs-flash-fallback width=640 height=480 type=application/x-shockwave-flash' +

                                'data=http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf>' +

                                '<param name=movie value=http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf />' +

                                '<param name=allowfullscreen value=true />' +

                                '<param name=flashvars value='config={playlist:[' + url + '.png, {url: http://video-js.zencoder.com/oceans-clip.mp4,autoPlay:false,autoBuffering:true}]}' />' +

                                '<!-- Image Fallback. Typically the same as the poster image. -->' +

                                '<img src=' + url + '.png width=632 height=15 alt=Poster Image' +

                                 ' title=No video playback capabilities. />' +

                              '</object>' +

                            '</video>' +

                            '</div></div>',

                'onComplete': function () { $(#fancybox-inner).css({ 'overflow': 'hidden' }); },

                'onClosed': function () { $(#fancybox-inner).empty(); }

            });

            return false;

        }); // fancyvideo



        VideoJS.setupAllWhenReady();

    });



</script>   

the name in the html link is just the full path of the file, so i have an mp4 somewhere on the server.

There are controls..but i think its the default HTML5 video controls, and not the jsvideo controls...

If i take fancybox out of it - and just put the jsvideo inline like this

<!-- Begin VideoJS --> 

              <div class=video-js-box> 

                <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody --> 

                <video id=example_video_1 class=video-js width=320 height=240 controls=controls preload=auto poster=http://video-js.zencoder.com/oceans-clip.png> 

                  <source src=http://video-js.zencoder.com/oceans-clip.mp4 type='video/mp4; codecs=avc1.42E01E, mp4a.40.2' /> 

                  <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. --> 

                  <object id=flash_fallback_1 class=vjs-flash-fallback width=640 height=264 type=application/x-shockwave-flash

                    data=http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf> 

                    <param name=movie value=http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf /> 

                    <param name=allowfullscreen value=true /> 

                    <param name=flashvars value='config={playlist:[http://video-js.zencoder.com/oceans-clip.png, {url: http://video-js.zencoder.com/oceans-clip.mp4,autoPlay:false,autoBuffering:true}]}' /> 

                    <!-- Image Fallback. Typically the same as the poster image. --> 

                    <img src=http://video-js.zencoder.com/oceans-clip.png width=640 height=264 alt=Poster Image

                      title=No video playback capabilities. /> 

                  </object> 

                </video> 

                <!-- Download links provided for devices that can't play video in the browser. --> 

                <p class=vjs-no-video><strong>Download Video:</strong> 

                  <a href=http://video-js.zencoder.com/oceans-clip.mp4>MP4</a>,

                  <a href=http://video-js.zencoder.com/oceans-clip.webm>WebM</a>,

                  <a href=http://video-js.zencoder.com/oceans-clip.ogv>Ogg</a><br> 

                  <!-- Support VideoJS by keeping this link. --> 

                  <a href=http://videojs.com>HTML5 Video Player</a> by VideoJS

                </p> 

              </div> 

              <!-- End VideoJS -->

Video with proper controls come in - is it because im trying to stuff a into the fancybox content?

Thanks