Change fancybox size

@danstramer – So you’re looking for one of two options:

1. Adjust the width / height of the Fancybox window on one specific page, while keeping the current sizing on the other pages.

2. Have Fancybox automatically adjust to size (maybe on just that page, or maybe on all pages).

Neither of those is possible out of the box, but we might be able to do it via custom CSS. I’m wondering if you can try adding this custom CSS to your site?

#fancybox-wrap {
    left: 0 !important;
    right: 0;
    margin-inline: auto;
    width: fit-content !important;
}

Let me know if that gets you close. Any custom CSS can also be limited to specific page by adding that page’s body close in front of the selector (ie, like .page-id-106).

Thank you

Since the current page uses just horizontal videos, I added this CSS to the specific page:

 .fancybox-wrap, .fancybox-inner {
max-width: none !important;
max-height: none !important;
width: 800px !important; 
height: 450px !important;
}

Which did work.

Using your code above, still created a verical fancybox with the horizontal video inside.

Idealy, I would like the fancybox window to resize itself based on the videos proportions (either horizontal or vertical). so in the Fancybox 2 Vimeo settings, instead of emtering a pixel value, an auto value of some sort would work instead.

Dan

@danstramer – Glad to fine at least a short term solution.

“I would like the fancybox window to resize itself based on the videos proportions” -> I’ll add this to the list of feature requests. I agree this would be ideal, and the lightbox will do that already for images. I just need to explore what’s involved with videos which are obviously a more complex content type.

Since we have a short term fix, and we’re now moving into feature requests, I’m going to mark this resolved for now. But definitely feel free to continue to ask questions or send other good feedback!