@smartimpact-it/modern-video-embed 2.0.6 → 2.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smartimpact-it/modern-video-embed",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "Modern YouTube and Vimeo embed web components with lazy loading, accessibility, quality control, and comprehensive API",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/components/BaseVideoEmbed.ts

@@ -148,6 +148,38 @@ export abstract class BaseVideoEmbed extends HTMLElement {
     }
   }
 
+  /**
+   * Automatically set aspect ratio CSS custom properties
+   * This allows background videos to maintain correct proportions
+   */
+  protected setAspectRatio(width: number, height: number): void {
+    if (width > 0 && height > 0) {
+      // Calculate GCD for simplest ratio
+      const gcd = (a: number, b: number): number =>
+        b === 0 ? a : gcd(b, a % b);
+      const divisor = gcd(width, height);
+      const aspectWidth = width / divisor;
+      const aspectHeight = height / divisor;
+
+      this.style.setProperty("--si-embed-aspect-width", aspectWidth.toString());
+      this.style.setProperty(
+        "--si-embed-aspect-height",
+        aspectHeight.toString(),
+      );
+
+      // Also update the padding-top percentage for normal mode
+      const aspectRatioPercent = (height / width) * 100;
+      this.style.setProperty(
+        "--si-embed-video-aspect-ratio",
+        `${aspectRatioPercent}%`,
+      );
+
+      this.log(
+        `Aspect ratio auto-detected: ${aspectWidth}:${aspectHeight} (${width}x${height})`,
+      );
+    }
+  }
+
   /**
    * Custom controls creation (similar pattern across components)
    */

package/src/components/VideoEmbed.ts

@@ -133,6 +133,11 @@ export class VideoEmbed extends BaseVideoEmbed {
     return this._controls;
   }
   set controls(value: boolean) {
+    // Background mode videos must not have controls
+    if (this._background && value) {
+      this.warn("Cannot enable controls on background video");
+      return;
+    }
     this._controls = value;
     this.reflectBooleanAttribute("controls", value);
     if (this.video) {
@@ -152,6 +157,11 @@ export class VideoEmbed extends BaseVideoEmbed {
     return this._muted;
   }
   set muted(value: boolean) {
+    // Background mode videos must be muted
+    if (this._background && !value) {
+      this.warn("Cannot unmute background video");
+      return;
+    }
     this._muted = value;
     this.reflectBooleanAttribute("muted", value);
     if (this.video) {
@@ -556,10 +566,18 @@ export class VideoEmbed extends BaseVideoEmbed {
     });
 
     this.video.addEventListener("loadedmetadata", () => {
+      const width = this.video?.videoWidth || 0;
+      const height = this.video?.videoHeight || 0;
+
+      // Automatically set aspect ratio CSS custom properties
+      if (width > 0 && height > 0) {
+        this.setAspectRatio(width, height);
+      }
+
       this.dispatchCustomEvent("loadedmetadata", {
         duration: this.video?.duration || 0,
-        videoWidth: this.video?.videoWidth || 0,
-        videoHeight: this.video?.videoHeight || 0,
+        videoWidth: width,
+        videoHeight: height,
       });
     });
   }

package/src/components/VimeoEmbed.ts

@@ -152,6 +152,11 @@ export class VimeoEmbed extends BaseVideoEmbed {
     return this._controls;
   }
   set controls(value: boolean) {
+    // Background mode videos must not have controls
+    if (this._background && value) {
+      this.warn("Cannot enable controls on background video");
+      return;
+    }
     this._controls = value;
     this.reflectBooleanAttribute("controls", value);
     if (this.initialized) {
@@ -171,6 +176,11 @@ export class VimeoEmbed extends BaseVideoEmbed {
     return this._muted;
   }
   set muted(value: boolean) {
+    // Background mode videos must be muted
+    if (this._background && !value) {
+      this.warn("Cannot unmute background video");
+      return;
+    }
     this._muted = value;
     this.reflectBooleanAttribute("muted", value);
     if (this.player && this.playerReady) {
@@ -639,13 +649,17 @@ export class VimeoEmbed extends BaseVideoEmbed {
     this.iframe.allow =
       "autoplay; fullscreen; picture-in-picture; clipboard-write";
     this.iframe.allowFullscreen = true;
-    // Set responsive sizing
-    this.iframe.style.width = "100%";
-    this.iframe.style.height = "100%";
     this.iframe.style.border = "none";
 
+    // Set responsive sizing based on mode
     if (this._background) {
+      // In background mode, let CSS handle sizing with aspect-ratio
       this.iframe.style.pointerEvents = "none";
+      // Don't set width/height inline to allow CSS aspect-ratio to work
+    } else {
+      // In normal mode, fill the container
+      this.iframe.style.width = "100%";
+      this.iframe.style.height = "100%";
     }
 
     // Add tabindex for keyboard accessibility
@@ -683,7 +697,7 @@ export class VimeoEmbed extends BaseVideoEmbed {
       // Use the iframe element directly since it's already in the DOM
       this.player = new Vimeo.Player(iframe);
 
-      this.player.on("loaded", () => {
+      this.player.on("loaded", async () => {
         this.log("VimeoEmbed: Player is ready.");
         this.playerReady = true;
 
@@ -691,6 +705,19 @@ export class VimeoEmbed extends BaseVideoEmbed {
           this.player.setVolume(0);
         }
 
+        // Get video dimensions for aspect ratio
+        try {
+          const width = await this.player.getVideoWidth();
+          const height = await this.player.getVideoHeight();
+          if (width > 0 && height > 0) {
+            this.setAspectRatio(width, height);
+          }
+        } catch (error) {
+          this.warn("Could not get video dimensions:", error);
+          // Default to 16:9 if dimensions not available
+          this.setAspectRatio(16, 9);
+        }
+
         if (autoplay && this.setCustomControlState) {
           this.setCustomControlState(true);
           this._playing = true;

package/src/components/YouTubeEmbed.ts

@@ -174,6 +174,11 @@ export class YouTubeEmbed extends BaseVideoEmbed {
     return this._controls;
   }
   set controls(value: boolean) {
+    // Background mode videos must not have controls
+    if (this._background && value) {
+      this.warn("Cannot enable controls on background video");
+      return;
+    }
     this._controls = value;
     this.reflectBooleanAttribute("controls", value);
     if (this.initialized) {
@@ -200,6 +205,11 @@ export class YouTubeEmbed extends BaseVideoEmbed {
     return this._muted;
   }
   set muted(value: boolean) {
+    // Background mode videos must be muted
+    if (this._background && !value) {
+      this.warn("Cannot unmute background video");
+      return;
+    }
     this._muted = value;
     this.reflectBooleanAttribute("muted", value);
     if (this.player && this.playerReady) {
@@ -737,15 +747,22 @@ export class YouTubeEmbed extends BaseVideoEmbed {
             // Get the iframe element that YT.Player created
             this.iframe = this.player.getIframe();
 
-            // Apply responsive styling to iframe
-            if (this.iframe) {
-              this.iframe.style.width = "100%";
-              this.iframe.style.height = "100%";
-            }
+            // Set aspect ratio (YouTube is typically 16:9)
+            this.setAspectRatio(16, 9);
 
-            // Apply background mode styling if needed
-            if (this._background && this.iframe) {
-              this.iframe.style.pointerEvents = "none";
+            // Apply styling to iframe
+            if (this.iframe) {
+              if (this._background) {
+                // In background mode, let CSS handle sizing with aspect-ratio
+                this.iframe.style.pointerEvents = "none";
+                // Remove any inline sizing to let CSS aspect-ratio work
+                this.iframe.style.removeProperty("width");
+                this.iframe.style.removeProperty("height");
+              } else {
+                // In normal mode, fill the container
+                this.iframe.style.width = "100%";
+                this.iframe.style.height = "100%";
+              }
             }
 
             // Sync muted state with YouTube player

package/src/styles/_embed-base.scss

@@ -6,13 +6,16 @@
 @use "shared-functions" as *;
 
 // CSS Variables (common across all components)
+// All variables are prefixed with --si-embed- to prevent conflicts
 @mixin embed-css-variables {
-  --video-aspect-ratio: 56.25%; // Default 16:9
-  --poster-object-fit: cover;
-  --video-object-fit: contain;
-  --control-button-size: 70px;
-  --control-button-color: #ffffff;
-  --overlay-background-color: rgba(0, 0, 0, 0.5);
+  --si-embed-video-aspect-ratio: 56.25%; // Default 16:9
+  --si-embed-aspect-width: 16; // For dynamic aspect ratio calculations
+  --si-embed-aspect-height: 9; // For dynamic aspect ratio calculations
+  --si-embed-poster-object-fit: cover;
+  --si-embed-video-object-fit: contain;
+  --si-embed-control-button-size: 70px;
+  --si-embed-control-button-color: #ffffff;
+  --si-embed-overlay-background-color: rgba(0, 0, 0, 0.5);
 }
 
 // Base container styles
@@ -20,7 +23,7 @@
   display: block;
   position: relative;
   width: 100%;
-  padding-top: var(--video-aspect-ratio);
+  padding-top: var(--si-embed-video-aspect-ratio);
   overflow: hidden;
   background-color: #000;
 }
@@ -33,7 +36,7 @@
   width: 100%;
   height: 100%;
   border: none;
-  object-fit: var(--video-object-fit);
+  object-fit: var(--si-embed-video-object-fit);
 }
 
 // Poster image styles
@@ -46,7 +49,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    object-fit: var(--poster-object-fit);
+    object-fit: var(--si-embed-poster-object-fit);
     display: block;
     cursor: pointer;
   }
@@ -55,7 +58,7 @@
 // Custom control button overlay
 @mixin embed-button-overlay {
   .button-overlay {
-    background: var(--overlay-background-color);
+    background: var(--si-embed-overlay-background-color);
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -86,8 +89,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: var(--control-button-size);
-    width: var(--control-button-size);
+    height: var(--si-embed-control-button-size);
+    width: var(--si-embed-control-button-size);
     background-image: inline-svg(
       '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ffffff" d="M8,5.14V19.14L19,12.14L8,5.14Z" /></svg>'
     );
@@ -122,9 +125,13 @@
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        aspect-ratio: 16 / 9;
+        // Use aspect-ratio with min-dimensions to ensure coverage
+        aspect-ratio: var(--si-embed-aspect-width) /
+          var(--si-embed-aspect-height);
+        // Start with auto sizing based on aspect ratio
         width: auto;
         height: auto;
+        // Ensure iframe covers entire container
         min-width: 100%;
         min-height: 100%;
         pointer-events: none;
@@ -135,10 +142,23 @@
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
+        // Use CSS custom properties for dynamic aspect ratio
         width: 100%;
-        height: 100%;
+        height: calc(
+          (100% * var(--si-embed-aspect-height)) / var(--si-embed-aspect-width)
+        );
+        min-width: 100%;
+        min-height: 100%;
         object-fit: cover;
         pointer-events: none;
+
+        // Hide native media controls in background mode
+        &::-webkit-media-controls {
+          display: none !important;
+        }
+        &::-webkit-media-controls-enclosure {
+          display: none !important;
+        }
       }
     }
 
@@ -157,7 +177,7 @@
       padding: 1rem;
 
       .button {
-        --control-button-size: 40px;
+        --si-embed-control-button-size: 40px;
         opacity: 0.7;
         transition: opacity 0.2s ease;
         &:hover {

package/src/styles/video-embed.scss

@@ -11,6 +11,24 @@ video-embed {
   // Video-specific styles only
   video {
     @include embed-media-base;
+
+    // Hide native controls when controls attribute is not set
+    &::-webkit-media-controls {
+      display: none !important;
+    }
+    &::-webkit-media-controls-enclosure {
+      display: none !important;
+    }
+  }
+
+  // Show native controls only when explicitly enabled
+  &[controls] video {
+    &::-webkit-media-controls {
+      display: flex !important;
+    }
+    &::-webkit-media-controls-enclosure {
+      display: flex !important;
+    }
   }
 
   // Poster image specific to video (uses background-image pattern)