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 go

Answer 1

(see edit below for an improved answer)

For iframe content, your html should look like

hd
sd

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

HD
SD

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.