jquery - Fancybox 2 Height not working

Question

I'm trying to get two different heights from my fancybox depending on which link the client clicks on, but for some reason the height just keeps going to 100%. It's not going to the height I'm wanting

This is my code

$('.fancyboxhd').fancybox({
  width: 1287,
  height: 720
});
$('.fancyboxsd').fancybox({
  width: 640,
  height: 360,
});

It's an iFrame content

Answer 1

(see edit below for an improved answer)

For iframe content, your html should look like

<a class="fancyboxhd fancybox.iframe" href="hdfile.html">hd</a>
<a class="fancyboxsd fancybox.iframe" href="sdfile.html">sd</a>

then add these two options to your scripts

fitToView   : false,
autoSize    : false

so your scripts should look like

$(document).ready(function(){
 $('.fancyboxhd').fancybox({
   width : 1287,
   height : 720,
   fitToView : false,
   autoSize : false
 });
 $('.fancyboxsd').fancybox({
   width: 640,
   height: 360,
   fitToView : false,
   autoSize : false
 });
});

### EDIT ### : (Sep 05, 2013)

The code can be improved and simplified using (HTML5) data-* attributes in the anchors and the same class for both options like :

HTML

<a class="fancybox fancybox.iframe" data-width="1287" data-height="720" href="hdfile.html">HD</a>
<a class="fancybox fancybox.iframe" data-width="640"  data-height="360" href="sdfile.html">SD</a>

JS

$('.fancybox').fancybox({
    fitToView: false,
    autoSize: false,
    afterLoad: function () {
        this.width = $(this.element).data("width");
        this.height = $(this.element).data("height");
    }
});

See JSFIDDLE

NOTE: At the time of this edit, demo used fancybox v2.1.5.