Search code examples
javascriptjqueryfancybox

Opening a fancyBox with a certain aspect ratio

Does anyone know how I can open a resizable fancyBox with a certain aspect ratio (for example 16:9)?

Solution

  • There's a pure CSS solution too. It works even when you resize.

    .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'm assuming you needed this for a video displayed with fancybox. Hence the iframe-related css.

    P.S. I know this thread is old. But maybe someone still needs a solution.