how to load jplayer into fancybox overlay - including the jplayer controls

Question

I can load jplayer (jplayer.org) in a fancy box overlay, but I can't find out how to include the player's controls. I am doing this now:

$(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(){
                $("#video_container").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", {
            m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v",
            ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer_480x270.ogv",
            poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
          });
        },
        swfPath: "/js",
        supplied: "m4v, ogv"
      });


            }
        });
        return false;
    });
});

Could someone point me to how I include the controls to be loaded in the fancybox overlay when it opens? These are the divs of jplayer:

<div id="jp_container_1" class="jp-video ">
    <div class="jp-type-single">
      <div id="jquery_jplayer_1" class="jp-jplayer"></div>
      <div class="jp-gui">
        <div class="jp-video-play">
          <a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
        </div>
        <div class="jp-interface">
          <div class="jp-progress">
            <div class="jp-seek-bar">
              <div class="jp-play-bar"></div>
            </div>
          </div>
          <div class="jp-current-time"></div>
          <div class="jp-duration"></div>
          <div class="jp-controls-holder">
            <ul class="jp-controls">
              <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
              <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
              <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
              <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
              <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
              <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
            </ul>
            <div class="jp-volume-bar">
              <div class="jp-volume-bar-value"></div>
            </div>
            <ul class="jp-toggles">
              <li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>
              <li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>
              <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
              <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
            </ul>
          </div>
          <div class="jp-title">
            <ul>
              <li>Big Buck Bunny Trailer</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="jp-no-solution">
        <span>Update Required</span>
        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
      </div>
    </div>
  </div>

I can add the jplayer interface like this, but it doesn't connect properly to the video window in the fancy box overlay. Any pointers?

$(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(){
               $("#video_container").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", {
            m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v",
            ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer_480x270.ogv",
            poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
          });
        },
        swfPath: "/js",
        supplied: "m4v, ogv"
      });
          $('#video_container').append('<div id="jp_container_1" class="jp-video "><div class="jp-type-single"><div id="jquery_jplayer_1" class="jp-jplayer"></div><div class="jp-gui"><div class="jp-video-play"><a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a></div><div class="jp-interface"><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div><div class="jp-current-time"></div><div class="jp-duration"></div><div class="jp-controls-holder"><ul class="jp-controls"><li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li><li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li><li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li><li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li><li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li><li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li></ul><div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div><ul class="jp-toggles"><li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li><li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li><li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li><li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li></ul></div><div class="jp-title"><ul><li>Big Buck Bunny Trailer</li></ul></div></div></div><div class="jp-no-solution"><span>Update Required</span>To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.</div></div></div>');

            }
        });
        return false;
    });
});

I have also tried this, but that doesn't help either.

$(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(){
           $("#video_container").jPlayer({
    ready: function () {
     $(this).jPlayer("setMedia", {
    m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v",
    ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer_480x270.ogv",
    poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
    });
  },
  swfPath: "/js",
  supplied: "m4v, ogv",
  cssSelectorAncestor: "",
  cssSelector: {
    play: "#play",
    pause: "#pause",
    stop: "#stop",
    mute: "#mute",
    unmute: "#unmute",
    currentTime: "#currentTime",
    duration: "#duration"
  },
  size: {
    width: "640px",
    height: "500px"
  }
  });

    $('#video_container').append('<p><a href="javascript:;" id="play">play</a><a href="javascript:;" id="pause">pause</a> | <a href="javascript:;" id="stop">stop</a> | <a href="javascript:;" id="mute">mute</a><a href="javascript:;" id="unmute">unmute</a> |  <span id="currentTime"></span> / <span id="duration"></span></p><div id="jquery_jplayer_1" class="jp-jplayer">xxx</div>');

        }
    });

    return false;

});

});

Answer 1

Oh my. I was loading player into the wrong div. It's working now:

$(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(){
               $('#video_container').append('<div><p><a href="javascript:;" id="play">play</a><a href="javascript:;" id="pause">pause</a> | <a href="javascript:;" id="stop">stop</a> | <a href="javascript:;" id="mute">mute</a><a href="javascript:;" id="unmute">unmute</a> |  <span id="currentTime"></span> / <span id="duration"></span></p></div><div id="jquery_jplayer_1" class="jp-jplayer">xxx</div>');

               $("#jquery_jplayer_1").jPlayer({

                  ready: function () {
                    $(this).jPlayer("setMedia", {
                      m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v",
                      ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer_480x270.ogv",
                      poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
                    }).jplayer("play");
                  },

                  swfPath: "/assets/jplayer",
                  supplied: "m4v, ogv",
                  cssSelectorAncestor: "",

                  cssSelector: {
                    play: "#play",
                    pause: "#pause",
                    stop: "#stop",
                    mute: "#mute",
                    unmute: "#unmute",
                    currentTime: "#currentTime",
                    duration: "#duration"
                  },

                  size: {
                    width: "640px",
                    height: "500px"
                  }

                });

            }
        });

        return false;

    });
});