iframe lightbox is loading external content but showing just a black screen

[drakanor]

Description

I'm using the iframe lightbox mode for showing the content of an URL.

Steps to reproduce

https://jsfiddle.net/zsy7emjq/1/

The Content from the external website is loaded into the iframe container, but not visible.

JS code that you use to initialize lightGallery.

lightGallery(
  document.getElementById('button-lightgallery'),
  {
    selector: 'this',
  }
);

Sample HTML markup

<a id="button-lightgallery" href="" data-src="https://www.google.com" data-iframe="true">Load Content</a>

Environment

• Firefox latest, Chrome latest -
• Windows 11 -
• 2.7.2 -

Additional context

[bytesandbots3]

@drakanor, fixed the issue with the iframe lightbox mode displaying a black screen when loading external content. The problem was related to the CSS class used for the iframe container, which wasn't properly styling the iframe to display the content. Below is the summary of the changes made to address this issue:

--- a/src/lg-utils.ts
+++ b/src/lg-utils.ts
@@ -431,7 +431,7 @@
         iframeTitle?: string,
     ): string {
         const title = iframeTitle ? 'title="' + iframeTitle + '"' : '';
-        return `<div class="lg-video-cont lg-has-iframe" style="width:${iframeWidth}; max-width:${iframeMaxWidth}; height: ${iframeHeight}; max-height:${iframeMaxHeight}">
+        return `<div class="lg-media-cont lg-has-iframe" style="width:${iframeWidth}; max-width:${iframeMaxWidth}; height: ${iframeHeight}; max-height:${iframeMaxHeight}">
                     <iframe class="lg-object" frameborder="0" ${title} src="${src}"  allowfullscreen="true"></iframe>
                 </div>`;
     },

--- a/src/scss/lightgallery-core.scss
+++ b/src/scss/lightgallery-core.scss
@@ -258,6 +258,24 @@
             }
         }
     }

+    .lg-media-cont {
+        text-align: center;
+        display: inline-block;
+        vertical-align: middle;
+        position: relative;
+        .lg-object {
+            width: 100% !important;
+            height: 100% !important;
+        }
+    }
+
+    .lg-has-iframe {
+        .lg-media-cont {
+            -webkit-overflow-scrolling: touch;
+            overflow: auto;
+        }
+    }

The .lg-video-cont class is part of the video plugin. We have now changed the class name to .lg-media-cont and moved the styles to the main CSS.

Temporarily, you can use these styles to fix the black screen issue:
.lg-video-cont {
text-align: center;
display: inline-block;
vertical-align: middle;
position: relative;
.lg-object {
width: 100% !important;
height: 100% !important;
}
}

.lg-has-iframe {
.lg-video-cont {
-webkit-overflow-scrolling: touch;
overflow: auto;
}
}

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.