title: Fancybox 2 Dynamic Width Based on Content Size
body: <p>I've got an IFrame being opened via Fancybox 2 that plays a video:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a class="fancybox-video" href="/user/intro-file.cfm" rel="file_name" title="View Video"&gt;File Name&lt;/a&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$("a.fancybox-video").fancybox({
      scrolling   : 'no', 
      type        : 'iframe', 
      helpers     : { 
          title: null 
      }
  });
  </code></pre>
  
  <p>The video is user-uploaded, so I don't know the size. I will be setting a maxHeight and maxWidth on the Fancybox eventually, but I've removed them for easier troubleshooting. </p>
  
  <p>How can I set the width of the Fancybox based on the content? With my test file, which is around 400px wide, the fancybox itself is being set to 830/800px wide (the outer and inner widths): <a href="http://img528.imageshack.us/img528/3872/fancyboxwidth.png" rel="nofollow noreferrer">screencap of too-wide fancybox http://img528.imageshack.us/img528/3872/fancyboxwidth.png</a></p>
  
  <p>autoSize and fitToView have no effect. There's no CSS or code on the IFrame page that is setting a default width. If I force a width in the Fancybox code it works, but since my content is dynamic, it won't work for the live system.</p>
  
  <p>I also tried adapting a function from another question asking about height resizing, but it didn't work either:</p>
  
  <pre><code>beforeShow  : function() { 
      $('.fancybox-iframe').load(function() { 
          $('.fancybox-inner').width($(this).contents().find('body').width()); 
      }); 
  }
  </code></pre>
  
  <p>Edit: Added the code of the IFrame page I'm trying to load into the Fancybox:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
      &lt;body&gt;
          &lt;cfoutput&gt;
              &lt;script type="text/javascript" src="/Javascript/jwplayer.js"&gt;&lt;/script&gt;
              &lt;script type='text/javascript'&gt; 
                  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 &amp;&amp; event.metadata.height != undefined) {
                                      get_meta = false;
                                      if (event.metadata.width &gt; 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()});
                                  }
                              }
                          }
                      }
                  });
              &lt;/script&gt;
          &lt;/cfoutput&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>