FancyBox iframe height issue

[Tom Moreton]

I'm using FancyBox iframes to display some responsive Bootstrap content. This works great on large screens, scaling the height to exactly fit the content. However, the same height is used on smaller devices even though the responsive content has become taller and there is plenty of room on the screen for the window to be taller? It's almost as if the content is loaded at full width, the height is calculated and then the window width is made to fit the browser width? The CSS is mobile first so why would this happen?

Does anybody have any advice on a solution?

Here's my code:

$(".fancyiframe").fancybox( {
    maxWidth: '100%',
    height: 'auto',
    fitToView: false,
    autoHeight: true,
    type: 'iframe'
});

Thanks in advance