Title causes iframe glightbox to block the whole box

[Erando89]

Describe the bug When I open a glightbox using the API with an iframe and a title, the title causes an issue as it blocks the whole box and the iframe content is hidden.

Are you able to reproduce the bug in the demo site No.

To Reproduce Steps to reproduce the behavior:

1. Go to https://jsfiddle.net/Lascp3gq/

2. Click on 'Run'

3. See the error as the glightbox pops up but the title blocks the whole screen including the iframe content (which plays a video)

4. Change the HTML from

        {
                    'href': 'https://media.dastelefonbuch.de/HDPlayer.php?bgcolor=000&height=405&width=480&autostart=true&player=b&partnerid=TB29486979383&default=480&target=https://media.v4all.de/TB-SG/video/tsg_demo_youtube.mp4&iframe=true',
                   'title':'test'
          }
                                ]

   to

        {
                    'href': 'https://media.dastelefonbuch.de/HDPlayer.php?bgcolor=000&height=405&width=480&autostart=true&player=b&partnerid=TB29486979383&default=480&target=https://media.v4all.de/TB-SG/video/tsg_demo_youtube.mp4&iframe=true',
                   //'title':'test'
          }
                                ]

5. Click "Run"

6. The glightbox pops up with no title shown and the iframe content can be seen (it plays a video)

⚠️ Please note that the problem only appears with a screen width > 768 px so this might be a media query CSS problem.

Expected behavior The iframe content is not hidden and the title is shown as well.

Post the code you are using https://jsfiddle.net/Lascp3gq/

Screenshots If applicable, add screenshots to help explain your problem.

Desktop:

• OS: Windows 10 Pro 2004
• Browser Chrome
• Version 90.0.4430.212 (64-Bit)

[gingerchew]

Hey there @Erando89,

Thank you for submitting this bug report! Sorry for the late response!

I can confirm that the issue is also happening for me on Firefox 92 on my macbook pro. The .glightbox-mobile is added at screen size 768px and smaller. This adds position: absolute;, meaning otherwise the description has position: static;. Once that happens it takes up the whole space.

I unfortunately don't have the time to put out a full-hearted fix, but I think this should at least patch things up for now:

.gslide-description.description-bottom {
    position: absolute;
    bottom: 0;
}

This just borrows the necessary pieces that selector .glightbox-mobile .glightbox-container .gslide-description contains and will get overridden once the .glightbox-mobile class is added.

[Erando89]

Thank you, @frankie-tech. Looking forward to the fix.

[Rmh1978]

Hi @gingerchew

Have you had some time to look into this?

I have made this css override , but that just pushes the title up or down, so the modal is not calculated and centered on the page. With top: 0; the title overlaps the top of the iframe.

@media (min-width: 769px) {
    .gslide-description.description-top {
        position: absolute;
        top: -92px;
    }

    .gslide-description.description-bottom {
        position: absolute;
        bottom: -92px;
    }
}