Fancybox 2 Dynamic Width basé sur la taille du contenu

J’ai ouvert un IFrame via Fancybox 2 qui lit une vidéo:

HTML:

File Name 

Javascript:

 $("a.fancybox-video").fancybox({ scrolling : 'no', type : 'iframe', helpers : { title: null } }); 

La vidéo est téléchargée par l’utilisateur, donc je ne connais pas la taille. Je définirai éventuellement maxHeight et maxWidth sur la Fancybox, mais je les ai supprimées pour faciliter le dépannage.

Comment définir la largeur de la Fancybox en fonction du contenu? Avec mon fichier de test, qui fait environ 400 pixels de large, la fancybox elle-même est définie sur une largeur de 830 / 800px (les largeurs extérieure et intérieure): capture d’écran de fancybox trop large http://img528.imageshack.us/img528/3872/ fancyboxwidth.png

autoSize et fitToView n’ont aucun effet. Il n’y a pas de code CSS ou de code sur la page IFrame qui définit une largeur par défaut. Si je force une largeur dans le code Fancybox, cela fonctionne, mais comme mon contenu est dynamic, cela ne fonctionnera pas pour le système live.

J’ai aussi essayé d’adapter une fonction d’une autre question sur le redimensionnement en hauteur, mais cela n’a pas fonctionné non plus:

 beforeShow : function() { $('.fancybox-iframe').load(function() { $('.fancybox-inner').width($(this).contents().find('body').width()); }); } 

Edit: Ajout du code de la page IFrame que je tente de charger dans la Fancybox:

       var max_video_width = 924; jwplayer("preview").setup({ flashplayer: "/VideoPlayer/player.swf", controlbar: "bottom", file: "/videos/file_name", stretching: 'file_name', autostart: true, events: { onMeta: function(event) { if (get_meta) { if(event.metadata.width != undefined && event.metadata.height != undefined) { get_meta = false; if (event.metadata.width > max_video_width) { var new_height = (max_video_width / (event.metadata.width / event.metadata.height)) jwplayer("preview").resize(max_video_width,new_height); jwplayer("preview").stop(); $('##preview_wrapper').width(max_video_width).height(new_height); } else { jwplayer("preview").resize(event.metadata.width,event.metadata.height); jwplayer("preview").stop(); $('##preview_wrapper').width(event.metadata.width).height(event.metadata.height); } $('.loading-video').slideUp('fast',function(){$('.loading-video').remove()}); } } } } });     

    Regarder votre fichier intro-file.cfm rend les choses plus claires.

    Si votre code dans le fichier fonctionne correctement, je pense que vous pouvez obtenir les dimensions à partir du conteneur preview_wrapper .

    Juste deux questions:

    • si vous utilisez $ … in $('.loading-video').slideUp() par exemple, ne devriez-vous pas inclure le fichier jquery.js dans votre fichier intro-file.cfm ?
    • Ce double ## est-il avant le sélecteur dans $('##preview_wrapper').width() correct?

    En supposant que tout fonctionne correctement, essayez d’inclure dans votre script fancybox:

      scrolling: "no", // optional to avoid scrollbars inside fancybox beforeShow: function(){ this.width = $('.fancybox-iframe').contents().find('#preview_wrapper').width(); this.height = $('.fancybox-iframe').contents().find('#preview_wrapper').height(); } 

    … pour obtenir les dimensions de l’emballage du lecteur.

    La largeur de l’Iframe n’est actuellement pas calculée. Peut-être que vous pourriez définir largeur / hauteur pour chaque iframe comme ceci – http://jsfiddle.net/vVKMF/

    append autoSize à:

     $("a.fancybox-video").fancybox({ scrolling : 'no', type : 'iframe', autoSize : true, helpers : { title: null } }); 

    ou :

     fitToView : true,