Fancybox 3 Cant override width and height of iframe

Question

I found a lot of fancybox2 solutions but not a single fancybox 3 solution. So the first thing

I have a html like that in my iframe

<a data-fancybox class="fancyboxedit" data-src="facebook" href="javascript:;">
 <input type='submit' value='Submit'>
 </a>


$(".fancyboxedit").fancybox({
    iframe : {
        css : {
            width : '600px'
      height: '800px'
        }
    }
});

Altough the documentation is calling it can be overwritten I cant change anything.Hovewer I can change from source file it is ok

Answer 1

The idea is that you are encouraged to set iframe width/height using CSS -

.fancybox-slide--iframe .fancybox-content { .. }

This allows you to easily combine width/height with other CSS properties like min-width/max-width and use media queries. The default iframe dimensions are set using CSS, too.

Besides this, if you need to overwrite CSS values using JS, you can do it like this:

$("[data-fancybox]").fancybox({
    iframe : {
        css : {
            width  : '800px',
            height : '600px'
        }
    }
});

And, as Dat Nguyen already said, you have typo in your code - missing comma.

Answer 2

You are missing , in attributes of object

$(".fancyboxedit").fancybox({
    iframe : {
        css : {
            width : '600px',
      height: '800px'
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
<a data-fancybox class="fancyboxedit" data-src="http://fancyapps.com/fancybox/3/docs/" href="javascript:;">
 <input type='submit' value='Submit'>
 </a>

Answer 3

remember that code:

iframe : {
   css : {
      width : '600px',
      height: '800px'
   }
}

must stay into:

opts:{

}

this mode will works very well.