JW Player in Fancybox. Can't hide control bar

问题

Folk's, I'm using Fancybox and Jwplayer to show videos like it does with photos. My problem is that the navigation bar won't never hiding. Also, the video resize from 768px (original size) to 725px (display size) and I don't know why. Here is the code : HTML

 <a class="video" href="../img/advertising/img/video/NEOCLAIM_Femme.flv" title="NEOCLAIM Femme"><img src="../img/advertising/ico/ic02-neocalmF.jpg" alt="" /></a>

And JS

   $("a.video").click(function() {
   $.fancybox({
    'scrolling' : 'no',
    'padding' : 0,
    'title' : this.title,
    'type' :'swf',
    'content': '<embed src="../jwplayer/player.swf?file='+this.href+'&amp;autostart=true&amp;fs=1" type="application/x-shockwave-flash" width="768" height="432" wmode="opaque" allowfullscreen="true" allowscriptaccess="always"></embed>',
    helpers : {
        overlay : {
            css : {
                'background' : 'rgba(0, 0, 0, 1)'
            }
        }
    }              
   });
   return false;
  });

I'm a beginner and can't find out the solution. Thank you for your help. here is a link to the page After this link you must click on the first thumbnail

回答1:

That is not really a fancybox issue but something you may have found on LongTail support forums.

If you want to hide (and show on hover) the JWPlayer control bar, you just need to place it "over" via the flashvar controlbar=over ...so the control bar will auto-hide when the mouse is idle and show up if you hover the video while it plays.

On the other hand, you can pass the specific size of each video using the (HTML5) data-* attribute in your link like :

<a data-width="352" data-height="270" class="video" href="../img/advertising/img/video/NEOCLAIM_Femme.flv" title="NEOCLAIM Femme"><img src="../img/advertising/ico/ic02-neocalmF.jpg" alt="" /></a>

... (use the proper width and height values of each video) and in your fancybox script, prevent the auto-resize using the API option fitToView: false .... then catch every video's dimensions using the afterLoad callback.

Your full fancybox custom script should look like :

$(document).ready(function () {
  $(".video").fancybox({
    padding : 0,
    fitToView: false, // fancybox won't auto-resize to fit in viewport
    content: '<span></span>', // create temp content
    scrolling: 'no',
    helpers : { overlay : { css : {  'background' : 'rgba(0, 0, 0, 1)' }  }  },
    afterLoad: function () {
      var $width = $(this.element).data('width'); // get dimensions from data attributes
      var $height = $(this.element).data('height');
      // replace temp content
      this.content = "<embed src='jwplayer.swf?file=" + this.href + "&autostart=true&amp;wmode=opaque&amp;controlbar=over' type='application/x-shockwave-flash' width='" + $width + "' height='" + $height + "'></embed>"; 
    }
  });
}); // ready

... notice that we added controlbar=over in the string value of the object this.content. Also notice that we are not using the .click() method but binding fancybox directly to the selector .video. Additionally, we don't actually need 'title' : this.title or 'type' :'swf' either so I remove them.

Demo ? ... see it here

来源：https://stackoverflow.com/questions/14426659/jw-player-in-fancybox-cant-hide-control-bar

标签

jquery

fancybox

jwplayer

fancybox-2