Home / Topics / Responsive Lightbox / Fancybox Pro / Video not filling space, unwanted white gaps

Video not filling space, unwanted white gaps

We're here to help.

Tagged: , , , , , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • 1 April 2018 at 16:10 #24410
    mattock
    Participant

    Hi, I just purchased fancybox Pro to use in responsive lightbox and my Vimeo embedded videos are not filling the space. It has ugly white space top and bottom?

    Im using beaver builder and a normal button calling the video
    Do I need to add anything, like setting the dimensions etc, I thought it would just be responsive and always fill the lightbox space?

    See screenshot: fancybox-space

    3 April 2018 at 22:18 #24439
    mattock
    Participant

    Hello, anyone?.. can you help with this please

    5 April 2018 at 10:09 #24492
    Bartosz
    Keymaster

    Hi,
    Can we have a look at it at the live site?

    5 April 2018 at 10:13 #24493
    mattock
    Participant

    http://fullrotation.com click the “play showreel” button

    Its using beaver theme and beaver builder and the button is a module
    I just added the vimeo link to the button

    Resize the window to see it, gaps appear right and bottom

    Thank you

    5 April 2018 at 15:34 #24495
    Bartosz
    Keymaster

    Strange, we’re not sure where the issue comes from but it should be ok with the following CSS snippet added to your theme (or custom CSS in Customizer):

    iframe .fancybox-content {
    width: auto !important;
    }

    5 April 2018 at 22:36 #24525
    mattock
    Participant

    Hi, thanks but that had no affect at all. So I did an inspect in chrome and this worked

    .fancybox-slide–iframe .fancybox-content{
    width: auto !important;
    }

    but it needs the height also to work correctly at first
    height: auto !important;

    But when the height is added its not correct on mobiles in portrait or tall screens as the video sinks to the bottom of the page… but without the height also I still get a white gap sometimes underneath

    thanks

    6 April 2018 at 10:42 #24526
    Bartosz
    Keymaster

    Hi,
    Sorry, it look like it cut the class name:

    .fancybox-slide–iframe {
    width: auto !important;
    height: auto !important;
    }

    When used this it seems to look fine on all devices.

    7 April 2018 at 01:07 #24542
    mattock
    Participant

    HI thanks but that new code unfortunately that looks the same as the original white gaps
    see screenshot
    see screenshot

    this code below is the only thing that helps, but adding height makes it perfect on desktops but sink to bottom on mobiles and tall screens

    .fancybox-slide–iframe .fancybox-content{
    width: auto !important;
    }

    … I just want an out of the box simple solution that keeps the video centred and responsive
    Thanks

    10 April 2018 at 10:37 #24579
    mattock
    Participant

    Can I get a refund please? I think we get 14 days correct?
    Thanks

    11 April 2018 at 13:36 #24591
    Bartosz
    Keymaster

    Sure, it’s not a problem.
    However the code above worked perfectly in our tests.

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.
Featured In