title: Responsive vimeo in fancybox-2 - how to resize video when fancybox resizes
body: <p>I am unable to get the vimeo embedded iframe to resize properly when resizing the window, using fancybox (<a href="http://fancyapps.com/fancybox/" rel="nofollow">http://fancyapps.com/fancybox/</a>)</p>
  
  <p>On sizing the window down Fancybox resizes fine, as does the embedded video (using the code below). </p>
  
  <p>However, resize the window back up and the fancybox stays the same, as does the video.</p>
  
  <p>See here: <a href="http://jsfiddle.net/prng9/1/" rel="nofollow">http://jsfiddle.net/prng9/1/</a> - resize the result frame down then back up (The resizing down isn't perfect either to be honest - if anyone has any better ways please let me know - the code is based on this: <a href="http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php" rel="nofollow">http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php</a>)</p>
  
  <p>This is the fancy box code I am using:</p>
  
  <pre><code>jQuery(document).ready(function($) {
      var htmlcontent = "&lt;html&gt;&lt;body&gt;&lt;div class='vimeo_embed'&gt;&lt;iframe class='vimeo' src='//player.vimeo.com/video/47438073' width='500' height='281' webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;";
  
    jQuery.fancybox.open(
      {
          content: htmlcontent,
          type:'ajax',
          padding : 0,
          afterShow: function(current,previous) {
              var vid = jQuery('iframe.vimeo');
              var ht = vid.height();
              var wd = vid.width();
              vid.attr('data-aspectRatio', ht / wd)
                  .width(wd)
                  .height(ht)
                  .removeAttr('width')
                  .removeAttr('height');
              },
          onUpdate: function() {
              //should run when size or orientation is changed
              var vid = jQuery('iframe.vimeo');                               
              var newWidth = jQuery('.vimeo_embed').width();
              vid.width(newWidth).height(newWidth * vid.attr('data-aspectRatio'));
      }
    });  
  }); 
  </code></pre>
  
  <p>Note: I know fancybox allows vimeo resizing if linking to the video directly - for example I could use <a href="http://player.vimeo.com/video/47438073" rel="nofollow">http://player.vimeo.com/video/47438073</a> as the href, along with the media helper, and all would be fine.  However I have certain amount of access controls and tracking on video views so am using the videos embedded on other pages.  Hence the reason why I have included the html code in the sample above - this simulates the same environment.</p>
  
  <p>Thanks.</p>