Открытие fancyBox с определенным соотношением сторон

Question

Кто-нибудь знает, как я могу открыть изменяемый размер fancyBox с определенным соотношением сторон (например, 16: 9)?

Answer 1

Нет собственного способа легко изменить размер Fancybox.Вы можете сделать простую математику с screen.height , чтобы открыть Fancybox в определенном соотношении сторон относительно текущего разрешения экрана.

Answer 2

Есть и чистое решение CSS.Это работает, даже когда вы изменяете размер.

.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;
}

Я предполагаю, что вам это нужно для видео, отображаемого с fancyboxСледовательно, связанный с iframe css.

PS Я знаю, что эта ветка старая.Но, возможно, кому-то все еще нужно решение.

Answer 3

Вот чистое решение CSS для отзывчивых всплывающих окон YouTube, которое работает с Fancybox 3. Оно написано на scss для ясности, но может быть преобразовано в css онлайн, если вы не знакомы с 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;
        }

    }
}

Answer 4

AFAIK, Fancybox сейчас не поддерживает это.Тем не менее, вы можете контролировать размер необычного размера коробки

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