Opening fancyBox with a specific aspect ratio

Question

Does anyone know how I can open a resizable fancyBox with a specific aspect ratio (like 16: 9)?

Answer 1

There is also a pure CSS solution. It works even when resized.

.fancybox-type-iframe .fancybox-inner{
    padding-top: 56.2%; /* (9/16 * 100%) -- your aspect ratio in percents */
    height: 0 !important;
}

.fancybox-type-iframe .fancybox-inner .fancybox-iframe{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
}

I assume you need this for a video displayed using fancybox. Hence related to iframe css.

PS I know that this branch is outdated. But maybe someone still needs a solution.

Answer 2

Fancybox. screen.height, Fancybox .

var height = screen.height/4;

$("#test").fancybox({
           'width' : 16/9. * height,
           'height' : height,
           'autoDimensions' : false
      }); 
});

Answer 3

AFAIK, Fancybox right now, doesn't support this. However, you can control the size of the size box.

("#yourbox").fancybox({
    'width'             : 680,
    'height'             495,
    'showCloseButton'   : false,
    'titlePosition'     : 'inside',
    'titleFormat'       : formatTitle
});

Answer 4

Here is a purely youtube responsive pop-up css solution that works with Fancybox 3. It is written in scss for clarity, but can be converted to css online if you are not familiar with scss.

.fancybox-slide--iframe {

    .fancybox-content{
        margin: 0!important;
        max-width: 100%;
        width: 100%;
        padding-top: 56.2%; /* (9/16 * 100%) -- your aspect ratio in percents */
        height: 0 !important;

        /* don't go full width on wide screens */
        @media all and (min-width: 800px) {
            max-width: 70%;
            width: 70%;
            padding-top: 39.34%;  /* (9/16 * 70%) -- smaller aspect ratio in percents */
        }

        .fancybox-iframe{ 
            position: absolute; 
            top: 0; 
            left: 0; 
            right: 0; 
            bottom: 0;
        }

    }
}