CODEWITHSUNDEEP
htmlcssiframesizefancybox
Daniel Schmitt
Daniel Schmitt

Reputation: 35

Fancybox3 by fancyapps | iFrame resize

I'm trying to make 3 iframes using facnybox3, but I don't know how make to 3 iframes with their own defined size. Any idea?

My code: http://fancyapps.com/fancybox/3/docs/#iframe

HTML:

<a data-fancybox data-type="iframe" data-src="http://codepen.io/fancyapps/full/jyEGGG/" href="javascript:;">
    Webpage
</a>

CSS:

.fancybox-slide--iframe .fancybox-content {
    width  : 800px;
    height : 600px;
    max-width  : 80%;
    max-height : 80%;
    margin: 0;
}

Upvotes: 0

Views: 1157

Answers (1)

Janis
Janis

Reputation: 8769

You can use data-options attribute to set custom options, see 2nd example here - https://codepen.io/fancyapps/pen/qoKGRW?editors=1000 

<a href="https://blog.codepen.io/" data-fancybox data-options='{ "type" : "iframe", "iframe" : { "preload" : false, "css" : { "width" : "600px" } } }'>
    Custom options
</a>

Upvotes: 1

Related Questions