fix: correct iframe container styles to display external content #1600

Author: bytesandbots3

src/lg-utils.ts

@@ -397,7 +397,7 @@ const utils = {
         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>`;
     },
@@ -579,6 +579,7 @@ const utils = {
             dynamicEl.alt = alt || title || '';
             dynamicElements.push(dynamicEl);
         });
+        console.log(dynamicElements, 'dynamicElements');
         return dynamicElements;
     },
     isMobile(): boolean {

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;
+        }
+    }
 }
 
 .lg-backdrop {