feat: add iframe max-width max-height options

sachinchoolur · Oct 28, 2021 · cbaf4f1 · cbaf4f1
1 parent c173d32
commit cbaf4f1
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/src/lg-settings.ts b/src/lg-settings.ts
@@ -385,10 +385,20 @@ export interface LightGalleryCoreSettings {
     iframeWidth: string;
 
     /**
-     * Set width for iframe.
+     * Set height for iframe.
      */
     iframeHeight: string;
 
+    /**
+     * Set max width for iframe.
+     */
+    iframeMaxWidth: string;
+
+    /**
+     * Set max height for iframe.
+     */
+    iframeMaxHeight: string;
+
     /**
      * Enable download button.
      * @description By default download url will be taken from data-src/href attribute but it supports only for modern browsers.
@@ -543,6 +553,8 @@ export const lightGalleryCoreSettings: LightGalleryCoreSettings = {
     index: 0,
     iframeWidth: '100%',
     iframeHeight: '100%',
+    iframeMaxWidth: '100%',
+    iframeMaxHeight: '100%',
     download: true,
     counter: true,
     appendCounterTo: '.lg-toolbar',

diff --git a/src/lg-utils.ts b/src/lg-utils.ts
@@ -366,11 +366,13 @@ const utils = {
     getIframeMarkup(
         iframeWidth: string,
         iframeHeight: string,
+        iframeMaxWidth: string,
+        iframeMaxHeight: string,
         src?: string,
         iframeTitle?: string,
     ): string {
         const title = iframeTitle ? 'title="' + iframeTitle + '"' : '';
-        return `<div class="lg-video-cont lg-has-iframe" style="width:${iframeWidth}; height: ${iframeHeight}">
+        return `<div class="lg-video-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>`;
     },

diff --git a/src/lightgallery.ts b/src/lightgallery.ts
@@ -1120,6 +1120,8 @@ export class LightGallery {
                 const markup = utils.getIframeMarkup(
                     this.settings.iframeWidth,
                     this.settings.iframeHeight,
+                    this.settings.iframeMaxWidth,
+                    this.settings.iframeMaxHeight,
                     src,
                     currentGalleryItem.iframeTitle,
                 );