@smartimpact-it/modern-video-embed 2.0.1

package/src/components/VimeoEmbed.ts

@@ -0,0 +1,1340 @@
+export class VimeoEmbed extends HTMLElement {
+  private iframe: HTMLIFrameElement | null = null;
+  private player: any = null; // Vimeo Player instance
+  private static apiLoaded = false;
+  private static apiReady = false;
+  private static instanceCount = 0;
+  private static DEBUG = false;
+  private playerReady = false;
+  private playPauseButton: HTMLDivElement | null = null;
+  private initialized = false;
+  private setCustomControlState: ((playing: boolean) => void) | null = null;
+  private updatingAttribute = false;
+  private updatingMutedState = false; // Flag to prevent sync from overwriting programmatic mute changes
+
+  /** The full Vimeo URL (e.g., "https://vimeo.com/...") */
+  #url: string = "";
+  /** The Vimeo video ID (numeric). */
+  #videoId: string = "";
+  /** Whether the video should autoplay when loaded. Requires `muted` to be true. */
+  #autoplay: boolean = false;
+  /** Whether the video audio is muted. */
+  #muted: boolean = false;
+  /** Whether to show the native Vimeo player controls. */
+  #controls: boolean = false;
+  /** Whether to lazy-load the video, showing a poster image until interaction. */
+  #lazy: boolean = false;
+  /** URL for a custom poster image. Defaults to Vimeo's thumbnail. */
+  #poster: string = "";
+  /** Read-only property to check if the video is currently playing. */
+  #playing: boolean = false;
+  /** Whether the video should act as a background, covering its container. */
+  #background: boolean = false;
+  /** Extra parameters to pass to the Vimeo player. */
+  #playerVars: Record<string, string | number | boolean> = {};
+
+  private posterClickHandler: EventListener | null = null;
+  private keyboardHandler: ((e: KeyboardEvent) => void) | null = null;
+  private ariaLiveRegion: HTMLElement | null = null;
+  private apiLoadRetries = 0;
+  private static readonly MAX_API_RETRIES = 3;
+  private static readonly API_RETRY_DELAY = 2000;
+  private static readonly API_LOAD_TIMEOUT = 10000;
+  private intersectionObserver: IntersectionObserver | null = null;
+  private hasLoadedVideo = false;
+
+  static get observedAttributes() {
+    return [
+      "url",
+      "video-id",
+      "autoplay",
+      "controls",
+      "lazy",
+      "muted",
+      "poster",
+      "background",
+      "player-vars",
+      "quality",
+    ];
+  }
+
+  attributeChangedCallback(
+    name: string,
+    oldValue: string | null,
+    newValue: string | null
+  ) {
+    if (this.updatingAttribute) {
+      return;
+    }
+
+    this.log(
+      `VimeoEmbed: Attribute changed - ${name}: ${oldValue} -> ${newValue}`
+    );
+
+    switch (name) {
+      case "url":
+        this.#url = newValue || "";
+        this.#videoId = this.extractVideoId(this.#url);
+        if (this.initialized) {
+          this.reinitializePlayer();
+        }
+        break;
+      case "video-id":
+        this.#videoId = newValue || "";
+        if (this.initialized) {
+          this.reinitializePlayer();
+        }
+        break;
+      case "autoplay":
+        this.#autoplay = newValue !== null;
+        if (
+          !this.#playing &&
+          this.#autoplay &&
+          !this.#lazy &&
+          this.initialized
+        ) {
+          this.play();
+        }
+        break;
+      case "controls":
+        this.#controls = newValue !== null;
+        if (this.initialized) {
+          this.reinitializePlayer();
+        }
+        break;
+      case "lazy":
+        this.#lazy = newValue !== null;
+        break;
+      case "muted":
+        this.#muted = newValue !== null;
+        if (this.player && this.playerReady) {
+          this.player.setVolume(this.#muted ? 0 : 1);
+        }
+        break;
+      case "poster":
+        this.#poster = newValue || "";
+        if (this.#lazy && !this.player) {
+          this.showPoster(this.#videoId);
+        }
+        break;
+      case "background":
+        this.#background = newValue !== null;
+        this.#updateBackgroundMode();
+        break;
+      case "player-vars":
+        try {
+          this.#playerVars = newValue ? JSON.parse(newValue) : {};
+        } catch (e) {
+          this.error("VimeoEmbed: Invalid player-vars JSON:", e);
+          this.#playerVars = {};
+        }
+        if (this.initialized) {
+          this.reinitializePlayer();
+        }
+        break;
+      case "quality":
+        if (newValue && this.player && this.playerReady) {
+          this.setQuality(newValue);
+        }
+        break;
+    }
+  }
+
+  // Getters and setters for attributes
+  get url() {
+    return this.#url;
+  }
+  set url(value: string) {
+    this.#url = value;
+    this.#videoId = this.extractVideoId(value);
+    if (this.initialized) {
+      this.reinitializePlayer();
+    }
+  }
+
+  get videoId() {
+    return this.#videoId;
+  }
+  set videoId(value: string) {
+    this.#videoId = value;
+    if (this.initialized) {
+      this.reinitializePlayer();
+    }
+  }
+
+  get autoplay() {
+    return this.#autoplay;
+  }
+  set autoplay(value: boolean) {
+    this.#autoplay = value;
+    this.#reflectBooleanAttribute("autoplay", value);
+    if (!this.#playing && value && !this.#lazy && this.initialized) {
+      this.play();
+    }
+  }
+
+  get controls() {
+    return this.#controls;
+  }
+  set controls(value: boolean) {
+    this.#controls = value;
+    this.#reflectBooleanAttribute("controls", value);
+    if (this.initialized) {
+      this.reinitializePlayer();
+    }
+  }
+
+  get lazy() {
+    return this.#lazy;
+  }
+  set lazy(value: boolean) {
+    this.#lazy = value;
+    this.#reflectBooleanAttribute("lazy", value);
+  }
+
+  get muted() {
+    return this.#muted;
+  }
+  set muted(value: boolean) {
+    this.#muted = value;
+    this.#reflectBooleanAttribute("muted", value);
+    if (this.player && this.playerReady) {
+      this.updatingMutedState = true;
+      this.player.setVolume(value ? 0 : 1);
+      // Reset flag after a short delay to allow Vimeo API to process
+      setTimeout(() => {
+        this.updatingMutedState = false;
+      }, 100);
+    }
+  }
+
+  get poster() {
+    return this.#poster;
+  }
+  set poster(value: string) {
+    this.#poster = value;
+    this.updatingAttribute = true;
+    if (value) {
+      this.setAttribute("poster", value);
+    } else {
+      this.removeAttribute("poster");
+    }
+    this.updatingAttribute = false;
+    if (this.#lazy && !this.player) {
+      this.showPoster(this.#videoId);
+    }
+  }
+
+  get playing() {
+    return this.#playing;
+  }
+
+  get background() {
+    return this.#background;
+  }
+  set background(value: boolean) {
+    this.#background = value;
+    this.#reflectBooleanAttribute("background", value);
+    this.#updateBackgroundMode();
+  }
+
+  get playerVars() {
+    return this.#playerVars;
+  }
+  set playerVars(vars: Record<string, string | number | boolean>) {
+    this.#playerVars = vars;
+    this.setAttribute("player-vars", JSON.stringify(vars));
+    if (this.initialized) {
+      this.reinitializePlayer();
+    }
+  }
+
+  #reflectBooleanAttribute(name: string, value: boolean) {
+    this.updatingAttribute = true;
+    if (value) {
+      this.setAttribute(name, "");
+    } else {
+      this.removeAttribute(name);
+    }
+    this.updatingAttribute = false;
+  }
+
+  private extractVideoId(url: string): string {
+    if (!url) return "";
+
+    // Handle various Vimeo URL formats
+    // https://vimeo.com/123456789
+    // https://player.vimeo.com/video/123456789
+    const regex =
+      /(?:vimeo\.com\/(?:video\/)?|player\.vimeo\.com\/video\/)(\d+)/;
+    const match = url.match(regex);
+
+    if (match && match[1]) {
+      return match[1];
+    }
+
+    // If it's already just an ID (numeric)
+    if (/^\d+$/.test(url)) {
+      return url;
+    }
+
+    this.warn(`VimeoEmbed: Could not extract video ID from "${url}"`);
+    return "";
+  }
+
+  private log(...args: any[]) {
+    if (VimeoEmbed.DEBUG) {
+      console.log("VimeoEmbed:", ...args);
+    }
+  }
+
+  private warn(...args: any[]) {
+    console.warn(...args);
+  }
+
+  private error(...args: any[]) {
+    console.error(...args);
+  }
+
+  private dispatchCustomEvent(eventName: string, detail?: any) {
+    this.dispatchEvent(
+      new CustomEvent(eventName, {
+        detail,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private isValidPosterUrl(url: string): boolean {
+    if (!url) return false;
+    try {
+      new URL(url);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * Setup fullscreen change event listener
+   */
+  private setupFullscreenListener(): void {
+    const handleFullscreenChange = () => {
+      const isFullscreen = this.isFullscreen();
+      this.dispatchCustomEvent("fullscreenchange", { isFullscreen });
+
+      if (isFullscreen) {
+        this.classList.add("is-fullscreen");
+      } else {
+        this.classList.remove("is-fullscreen");
+      }
+    };
+
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
+    document.addEventListener("mozfullscreenchange", handleFullscreenChange);
+    document.addEventListener("MSFullscreenChange", handleFullscreenChange);
+  }
+
+  /**
+   * Setup keyboard event handlers for accessibility
+   */
+  private setupKeyboardHandlers(): void {
+    this.keyboardHandler = (e: KeyboardEvent) => {
+      // Only handle if player is ready and not in input element
+      if (!this.playerReady || (e.target as HTMLElement)?.tagName === "INPUT") {
+        return;
+      }
+
+      switch (e.key.toLowerCase()) {
+        case "k":
+        case " ":
+          // Play/Pause
+          e.preventDefault();
+          this.togglePlay();
+          this.announceToScreenReader(
+            this.#playing ? "Video playing" : "Video paused"
+          );
+          break;
+
+        case "m":
+          // Mute/Unmute
+          e.preventDefault();
+          this.toggleMute();
+          this.player?.getMuted().then((muted: boolean) => {
+            this.announceToScreenReader(
+              muted ? "Video muted" : "Video unmuted"
+            );
+          });
+          break;
+
+        case "f":
+          // Fullscreen toggle
+          e.preventDefault();
+          if (document.fullscreenElement) {
+            document.exitFullscreen();
+            this.announceToScreenReader("Exited fullscreen");
+          } else if (this.enterFullscreen) {
+            this.enterFullscreen();
+            this.announceToScreenReader("Entered fullscreen");
+          }
+          break;
+      }
+    };
+
+    this.addEventListener("keydown", this.keyboardHandler as EventListener);
+  }
+
+  /**
+   * Announce message to screen readers
+   */
+  private announceToScreenReader(message: string): void {
+    if (this.ariaLiveRegion) {
+      this.ariaLiveRegion.textContent = message;
+      // Clear after a brief delay
+      setTimeout(() => {
+        if (this.ariaLiveRegion) {
+          this.ariaLiveRegion.textContent = "";
+        }
+      }, 1000);
+    }
+  }
+
+  /**
+   * Add preconnect and dns-prefetch hints for Vimeo domains
+   */
+  private addResourceHints(): void {
+    const hints = [
+      { rel: "preconnect", href: "https://player.vimeo.com" },
+      { rel: "preconnect", href: "https://i.vimeocdn.com" },
+      { rel: "dns-prefetch", href: "https://player.vimeo.com" },
+      { rel: "dns-prefetch", href: "https://i.vimeocdn.com" },
+    ];
+
+    hints.forEach(({ rel, href }) => {
+      if (!document.querySelector(`link[rel="${rel}"][href="${href}"]`)) {
+        const link = document.createElement("link");
+        link.rel = rel;
+        link.href = href;
+        if (rel === "preconnect") {
+          link.crossOrigin = "anonymous";
+        }
+        document.head.appendChild(link);
+      }
+    });
+  }
+
+  /**
+   * Setup Intersection Observer for lazy loading
+   */
+  private setupIntersectionObserver(): void {
+    if (!("IntersectionObserver" in window)) {
+      // Fallback: load immediately if IntersectionObserver not supported
+      return;
+    }
+
+    const options: IntersectionObserverInit = {
+      root: null,
+      rootMargin: "50px", // Start loading 50px before entering viewport
+      threshold: 0.01,
+    };
+
+    this.intersectionObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting && !this.hasLoadedVideo) {
+          this.hasLoadedVideo = true;
+          this.log("VimeoEmbed: Video entering viewport, loading...");
+
+          // Check if poster was clicked before intersection
+          const shouldAutoplay =
+            this.getAttribute("data-poster-autoplay") === "true";
+
+          if (!shouldAutoplay) {
+            // Just load the player, don't autoplay
+            this.initializePlayer(this.#videoId);
+          }
+
+          // Disconnect observer after loading
+          if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+          }
+        }
+      });
+    }, options);
+
+    this.intersectionObserver.observe(this);
+  }
+
+  /**
+   * Display error message to user with retry option
+   */
+  private showErrorMessage(message: string): void {
+    const errorDiv = document.createElement("div");
+    errorDiv.className = "vimeo-error-message";
+    errorDiv.setAttribute("role", "alert");
+    errorDiv.innerHTML = `
+      <div class="error-content">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="10"></circle>
+          <line x1="12" y1="8" x2="12" y2="12"></line>
+          <line x1="12" y1="16" x2="12.01" y2="16"></line>
+        </svg>
+        <p class="error-message">${message}</p>
+        <button class="retry-button">Retry</button>
+      </div>
+    `;
+
+    const retryButton = errorDiv.querySelector(".retry-button");
+    if (retryButton) {
+      retryButton.addEventListener("click", () => {
+        this.apiLoadRetries = 0;
+        errorDiv.remove();
+        if (this.#videoId) {
+          this.initializePlayer(this.#videoId);
+        }
+      });
+    }
+
+    // Clear existing content
+    this.innerHTML = "";
+    this.appendChild(errorDiv);
+  }
+
+  connectedCallback() {
+    VimeoEmbed.instanceCount++;
+    this.log(
+      "VimeoEmbed: connectedCallback called, instance count:",
+      VimeoEmbed.instanceCount
+    );
+
+    // Add resource hints on first instance
+    if (VimeoEmbed.instanceCount === 1) {
+      this.addResourceHints();
+    }
+
+    const urlAttr = this.getAttribute("url");
+    const videoIdAttr = this.getAttribute("video-id");
+
+    if (urlAttr) {
+      this.#url = urlAttr;
+      this.#videoId = this.extractVideoId(urlAttr);
+    } else if (videoIdAttr) {
+      this.#videoId = videoIdAttr;
+    }
+
+    this.#autoplay = this.hasAttribute("autoplay");
+    this.#controls = this.hasAttribute("controls");
+    this.#lazy = this.hasAttribute("lazy");
+    this.#muted = this.hasAttribute("muted");
+    this.#background = this.hasAttribute("background");
+
+    this.#poster = this.getAttribute("poster") || "";
+    try {
+      const playerVarsAttr = this.getAttribute("player-vars");
+      this.#playerVars = playerVarsAttr ? JSON.parse(playerVarsAttr) : {};
+    } catch (e) {
+      this.error("VimeoEmbed: Invalid player-vars JSON on init:", e);
+      this.#playerVars = {};
+    }
+
+    if (!this.#videoId) {
+      this.error("VimeoEmbed: Missing or invalid video ID");
+      this.dispatchCustomEvent("error", {
+        message: "Missing or invalid video ID",
+      });
+      return;
+    }
+
+    this.classList.add("vimeo-embed-wrapper");
+
+    // Add ARIA role and tabindex for accessibility
+    this.setAttribute("role", "region");
+    this.setAttribute("aria-label", "Video player");
+    if (!this.hasAttribute("tabindex")) {
+      this.setAttribute("tabindex", "0");
+    }
+
+    // Create ARIA live region for screen reader announcements
+    this.ariaLiveRegion = document.createElement("div");
+    this.ariaLiveRegion.setAttribute("aria-live", "polite");
+    this.ariaLiveRegion.setAttribute("aria-atomic", "true");
+    this.ariaLiveRegion.className = "sr-only";
+    this.ariaLiveRegion.style.cssText =
+      "position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;";
+    this.appendChild(this.ariaLiveRegion);
+
+    // Setup keyboard event handlers
+    this.setupKeyboardHandlers();
+
+    // Setup fullscreen change listener
+    this.setupFullscreenListener();
+
+    this.#updateBackgroundMode();
+
+    if (this.#lazy) {
+      this.showPoster(this.#videoId);
+      // Setup Intersection Observer for better performance
+      this.setupIntersectionObserver();
+    } else {
+      this.initializePlayer(this.#videoId);
+    }
+    this.initialized = true;
+    this.dispatchCustomEvent("connected");
+  }
+
+  disconnectedCallback() {
+    VimeoEmbed.instanceCount--;
+    this.log(
+      "VimeoEmbed: disconnectedCallback called, remaining instances:",
+      VimeoEmbed.instanceCount
+    );
+
+    if (this.player) {
+      try {
+        this.player.destroy();
+        this.log("VimeoEmbed: Player destroyed.");
+      } catch (error) {
+        this.warn("VimeoEmbed: Error destroying player:", error);
+      }
+      this.player = null;
+    }
+
+    // Remove keyboard event handlers
+    if (this.keyboardHandler) {
+      this.removeEventListener(
+        "keydown",
+        this.keyboardHandler as EventListener
+      );
+      this.keyboardHandler = null;
+    }
+
+    const poster = this.querySelector(".vimeo-poster");
+    const buttonOverlay = this.querySelector(".button-overlay");
+
+    if (poster && this.posterClickHandler) {
+      poster.removeEventListener("click", this.posterClickHandler);
+      this.posterClickHandler = null;
+    }
+
+    if (buttonOverlay && this.posterClickHandler) {
+      buttonOverlay.removeEventListener("click", this.posterClickHandler);
+    }
+
+    this.innerHTML = "";
+    this.classList.remove(
+      "vimeo-embed-wrapper",
+      "vimeo-embed-container",
+      "is-playing"
+    );
+
+    if (VimeoEmbed.instanceCount === 0) {
+      this.log("VimeoEmbed: Last instance, cleaning up global resources");
+
+      const script = document.querySelector(
+        'script[src="https://player.vimeo.com/api/player.js"]'
+      );
+      if (script) {
+        script.remove();
+        this.log("VimeoEmbed: Vimeo API script removed.");
+      }
+
+      VimeoEmbed.apiLoaded = false;
+      VimeoEmbed.apiReady = false;
+    }
+
+    this.iframe = null;
+    this.playPauseButton = null;
+    this.setCustomControlState = null;
+
+    this.dispatchCustomEvent("disconnected");
+    this.log("VimeoEmbed: Cleanup complete.");
+  }
+
+  private reinitializePlayer() {
+    if (!this.initialized || !this.#videoId) {
+      return;
+    }
+
+    if (this.player) {
+      try {
+        this.player.destroy();
+      } catch (error) {
+        this.warn("VimeoEmbed: Error destroying player:", error);
+      }
+    }
+
+    if (this.#lazy) {
+      this.showPoster(this.#videoId);
+    } else {
+      this.initializePlayer(this.#videoId);
+    }
+  }
+
+  private async showPoster(videoId: string) {
+    let thumbnailUrl = this.#poster;
+
+    // Fetch Vimeo thumbnail if no custom poster
+    if (!this.isValidPosterUrl(this.#poster)) {
+      try {
+        const response = await fetch(
+          `https://vimeo.com/api/v2/video/${videoId}.json`
+        );
+        const data = await response.json();
+        thumbnailUrl = data[0]?.thumbnail_large || "";
+      } catch (error) {
+        this.warn("VimeoEmbed: Could not fetch Vimeo thumbnail:", error);
+        thumbnailUrl = "";
+      }
+    }
+
+    this.log("VimeoEmbed: Using poster URL:", thumbnailUrl);
+
+    this.innerHTML = "";
+
+    if (this.posterClickHandler) {
+      this.posterClickHandler = null;
+    }
+
+    const poster = document.createElement("img");
+    poster.src = thumbnailUrl || "";
+    poster.alt = "Vimeo Video Thumbnail";
+    poster.classList.add("vimeo-poster", "video-poster");
+    poster.loading = "lazy";
+
+    poster.onerror = () => {
+      this.warn("VimeoEmbed: Poster failed to load, using white background.");
+      poster.style.display = "none";
+      this.style.backgroundColor = "#FFFFFF";
+    };
+
+    const buttonOverlay = document.createElement("div");
+    buttonOverlay.classList.add("button-overlay");
+    buttonOverlay.setAttribute("role", "button");
+    buttonOverlay.setAttribute("tabindex", "0");
+    buttonOverlay.setAttribute("aria-label", "Play video");
+
+    const button = document.createElement("div");
+    button.classList.add("button");
+    button.setAttribute("aria-hidden", "true");
+
+    buttonOverlay.appendChild(button);
+
+    const loadVideo: EventListener = () => {
+      this.log("VimeoEmbed: Loading video from poster click");
+      this.setAttribute("data-poster-autoplay", "true");
+      try {
+        this.initializePlayer(videoId);
+      } catch (error) {
+        this.error("VimeoEmbed: Error initializing player from poster:", error);
+        this.dispatchCustomEvent("error", { message: "Failed to load video" });
+      }
+    };
+
+    this.posterClickHandler = loadVideo;
+
+    // Add keyboard support
+    const keyboardActivate = (e: KeyboardEvent) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        loadVideo(e);
+      }
+    };
+
+    poster.addEventListener("click", loadVideo);
+    buttonOverlay.addEventListener("click", loadVideo);
+    buttonOverlay.addEventListener(
+      "keydown",
+      keyboardActivate as EventListener
+    );
+
+    this.appendChild(poster);
+    this.appendChild(buttonOverlay);
+
+    this.log("VimeoEmbed: Poster displayed for lazy loading");
+  }
+
+  private async initializePlayer(videoId: string) {
+    this.log("VimeoEmbed: Initializing player for video ID:", videoId);
+
+    const isBackground = this.#background;
+    const autoplay =
+      isBackground ||
+      this.hasAttribute("autoplay") ||
+      this.hasAttribute("data-poster-autoplay") ||
+      this.hasAttribute("data-should-autoplay");
+    const controls = isBackground ? false : this.hasAttribute("controls");
+    const mute = isBackground || autoplay;
+
+    if (this.hasAttribute("data-poster-autoplay")) {
+      this.removeAttribute("data-poster-autoplay");
+    }
+    if (this.hasAttribute("data-should-autoplay")) {
+      this.removeAttribute("data-should-autoplay");
+    }
+
+    this.log(
+      "VimeoEmbed: Creating iframe with autoplay:",
+      autoplay,
+      "controls:",
+      controls
+    );
+
+    this.iframe = document.createElement("iframe");
+
+    // Generate unique ID for Vimeo Player API
+    const iframeId = `vimeo-player-${videoId}-${Date.now()}`;
+    this.iframe.id = iframeId;
+
+    const params = new URLSearchParams({
+      autoplay: autoplay ? "1" : "0",
+      controls: controls ? "1" : "0",
+      muted: mute ? "1" : "0",
+      playsinline: "1",
+      dnt: "1", // Do not track
+      ...this.#playerVars,
+    });
+
+    if (this.#muted) {
+      params.set("muted", "1");
+    }
+
+    if (autoplay && !this.#muted) {
+      this.#muted = true;
+      this.log(
+        "VimeoEmbed: Autoplay enabled, forcing muted state for compliance"
+      );
+    }
+
+    this.iframe.src = `https://player.vimeo.com/video/${videoId}?${params.toString()}`;
+    this.iframe.allow =
+      "autoplay; fullscreen; picture-in-picture; clipboard-write";
+    this.iframe.allowFullscreen = true;
+    this.iframe.style.position = "absolute";
+    this.iframe.style.border = "none";
+
+    if (this.#background) {
+      this.iframe.style.pointerEvents = "none";
+    } else {
+      this.iframe.style.top = "0";
+      this.iframe.style.left = "0";
+      this.iframe.style.width = "100%";
+      this.iframe.style.height = "100%";
+    }
+
+    this.log("VimeoEmbed: Iframe created with src:", this.iframe.src);
+
+    this.replaceChildren(this.iframe);
+
+    // Store reference to iframe before async operations
+    const iframe = this.iframe;
+
+    if (!controls) {
+      this.addCustomControls();
+    }
+
+    try {
+      await VimeoEmbed.loadVimeoAPIWithRetry(this.apiLoadRetries);
+
+      // Check if component was disconnected during API load
+      if (!this.isConnected || !iframe.isConnected) {
+        this.log(
+          "VimeoEmbed: Component disconnected, skipping Player initialization"
+        );
+        return;
+      }
+
+      // Wait for iframe to be fully in DOM before initializing player
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // @ts-ignore - Vimeo Player will be available after loading the API
+      // Use the iframe element directly since it's already in the DOM
+      this.player = new Vimeo.Player(iframe);
+
+      this.player.on("loaded", () => {
+        this.log("VimeoEmbed: Player is ready.");
+        this.playerReady = true;
+
+        if (this.#muted) {
+          this.player.setVolume(0);
+        }
+
+        if (autoplay && this.setCustomControlState) {
+          this.setCustomControlState(true);
+          this.#playing = true;
+        }
+
+        this.dispatchCustomEvent("ready");
+      });
+
+      this.player.on("play", () => {
+        this.#playing = true;
+        if (this.setCustomControlState) {
+          this.setCustomControlState(true);
+        }
+        this.dispatchCustomEvent("play");
+      });
+
+      this.player.on("pause", () => {
+        this.#playing = false;
+        if (this.setCustomControlState) {
+          this.setCustomControlState(false);
+        }
+        this.dispatchCustomEvent("pause");
+      });
+
+      this.player.on("ended", () => {
+        this.#playing = false;
+        if (this.setCustomControlState) {
+          this.setCustomControlState(false);
+        }
+        this.dispatchCustomEvent("ended");
+      });
+
+      this.player.on("error", (error: any) => {
+        this.error("VimeoEmbed: Player encountered an error:", error);
+        this.dispatchCustomEvent("error", {
+          message: error.message || "Unknown error occurred",
+          name: error.name,
+        });
+      });
+    } catch (error) {
+      this.error("VimeoEmbed: Failed to load Vimeo API", error);
+      this.showErrorMessage(
+        error instanceof Error
+          ? error.message
+          : "Failed to load Vimeo player. Please refresh the page or check your connection."
+      );
+      this.dispatchCustomEvent("error", {
+        message: error instanceof Error ? error.message : "API load failed",
+        code: "API_LOAD_ERROR",
+        retryable: true,
+      });
+    }
+  }
+
+  private static async loadVimeoAPI(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      if (this.apiReady) {
+        resolve();
+        return;
+      }
+
+      if (!this.apiLoaded) {
+        const script = document.createElement("script");
+        script.src = "https://player.vimeo.com/api/player.js";
+        script.onload = () => {
+          this.apiReady = true;
+          this.apiLoaded = true;
+          resolve();
+        };
+        script.onerror = () => {
+          reject(
+            new Error(
+              "Failed to load Vimeo API script. Please check your network connection or disable ad blockers."
+            )
+          );
+        };
+        document.head.appendChild(script);
+        this.apiLoaded = true;
+      } else {
+        // Wait for API to be ready
+        const checkReady = setInterval(() => {
+          // @ts-ignore
+          if (typeof Vimeo !== "undefined") {
+            this.apiReady = true;
+            clearInterval(checkReady);
+            resolve();
+          }
+        }, 100);
+
+        setTimeout(() => {
+          clearInterval(checkReady);
+          reject(
+            new Error(
+              "Vimeo API loading timeout. The API script may be blocked by an ad blocker or network issue."
+            )
+          );
+        }, this.API_LOAD_TIMEOUT);
+      }
+    });
+  }
+
+  /**
+   * Load Vimeo API with retry mechanism
+   */
+  private static async loadVimeoAPIWithRetry(retries = 0): Promise<void> {
+    try {
+      await this.loadVimeoAPI();
+    } catch (error) {
+      if (retries < this.MAX_API_RETRIES) {
+        console.warn(
+          `VimeoEmbed: API load failed, retrying (${retries + 1}/${
+            this.MAX_API_RETRIES
+          })...`
+        );
+        await new Promise((resolve) =>
+          setTimeout(resolve, this.API_RETRY_DELAY)
+        );
+        return this.loadVimeoAPIWithRetry(retries + 1);
+      }
+      throw error;
+    }
+  }
+
+  private addCustomControls() {
+    this.classList.add("vimeo-embed-container");
+
+    const buttonOverlay = document.createElement("div");
+    buttonOverlay.classList.add("button-overlay");
+
+    this.playPauseButton = document.createElement("div");
+    this.playPauseButton.classList.add("button");
+    let isPlaying = false;
+
+    const setPlayingState = (playing: boolean) => {
+      isPlaying = playing;
+      if (playing) {
+        this.classList.add("is-playing");
+      } else {
+        this.classList.remove("is-playing");
+      }
+    };
+
+    const togglePlayPause = () => {
+      if (isPlaying) {
+        if (this.player) {
+          this.player.pause();
+        }
+        setPlayingState(false);
+      } else {
+        if (this.player) {
+          this.player.play();
+        }
+        setPlayingState(true);
+      }
+    };
+
+    this.setCustomControlState = setPlayingState;
+
+    buttonOverlay.addEventListener("click", togglePlayPause);
+    if (this.playPauseButton) {
+      buttonOverlay.appendChild(this.playPauseButton);
+    }
+    this.appendChild(buttonOverlay);
+  }
+
+  #updateBackgroundMode() {
+    if (this.#background) {
+      this.classList.add("is-background");
+      this.#autoplay = true;
+      this.#muted = true;
+      this.#controls = false;
+      this.#lazy = false;
+    } else {
+      this.classList.remove("is-background");
+    }
+  }
+
+  public async play(): Promise<void> {
+    if (this.#lazy && !this.player && !this.iframe) {
+      this.log(
+        "VimeoEmbed: Lazy video needs to be loaded first. Initializing..."
+      );
+      this.setAttribute("data-should-autoplay", "true");
+      await this.initializePlayer(this.#videoId);
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+    }
+
+    if (!this.playerReady) {
+      this.warn("VimeoEmbed: Player is not ready. Waiting for initialization.");
+      await new Promise((resolve) => {
+        const interval = setInterval(() => {
+          if (this.playerReady) {
+            clearInterval(interval);
+            resolve(null);
+          }
+        }, 100);
+        setTimeout(() => {
+          clearInterval(interval);
+          resolve(null);
+        }, 5000);
+      });
+    }
+
+    this.removeAttribute("data-should-autoplay");
+
+    if (this.player) {
+      this.player.play();
+      this.log("VimeoEmbed: Video playback started via API.");
+    }
+
+    this.#playing = true;
+    if (this.setCustomControlState) {
+      this.setCustomControlState(true);
+    }
+
+    this.dispatchCustomEvent("play");
+  }
+
+  public pause() {
+    if (this.player) {
+      this.player.pause();
+      this.log("VimeoEmbed: Video paused via API.");
+    }
+
+    this.#playing = false;
+    if (this.setCustomControlState) {
+      this.setCustomControlState(false);
+    }
+
+    this.dispatchCustomEvent("pause");
+  }
+
+  public stopVideo() {
+    if (this.player) {
+      this.player.pause();
+      this.player.setCurrentTime(0);
+      this.log("VimeoEmbed: Video stopped via API.");
+    }
+
+    this.#playing = false;
+    if (this.setCustomControlState) {
+      this.setCustomControlState(false);
+    }
+
+    this.dispatchCustomEvent("stop");
+  }
+
+  public mute() {
+    this.muted = true;
+  }
+
+  public unmute() {
+    this.muted = false;
+  }
+
+  public togglePlay() {
+    if (this.#playing) {
+      this.pause();
+    } else {
+      this.play();
+    }
+  }
+
+  public toggleMute() {
+    this.muted = !this.#muted;
+  }
+
+  public static toggleDebug(forceState?: boolean) {
+    VimeoEmbed.DEBUG =
+      forceState !== undefined ? forceState : !VimeoEmbed.DEBUG;
+    console.log(
+      `VimeoEmbed: Debugging is now ${
+        VimeoEmbed.DEBUG ? "ENABLED" : "DISABLED"
+      }.`
+    );
+  }
+
+  public getPlayerState() {
+    let actualMutedState = this.#muted;
+    if (this.player && this.playerReady && !this.updatingMutedState) {
+      try {
+        this.player.getVolume().then((volume: number) => {
+          actualMutedState = volume === 0;
+          if (actualMutedState !== this.#muted && !this.updatingMutedState) {
+            this.#muted = actualMutedState;
+          }
+        });
+      } catch (error) {
+        this.warn("VimeoEmbed: Could not get muted state from player:", error);
+      }
+    }
+
+    return {
+      playing: this.#playing,
+      muted: actualMutedState,
+      videoId: this.#videoId,
+      ready: this.playerReady,
+      initialized: this.initialized,
+    };
+  }
+
+  public isPlaying(): boolean {
+    return this.#playing;
+  }
+
+  public async isMuted(): Promise<boolean> {
+    if (this.player && this.playerReady) {
+      try {
+        const volume = await this.player.getVolume();
+        return volume === 0;
+      } catch (error) {
+        this.warn("VimeoEmbed: Could not get muted state from player:", error);
+      }
+    }
+    return this.#muted;
+  }
+
+  public async getCurrentTime(): Promise<number> {
+    if (this.player && this.playerReady) {
+      try {
+        return await this.player.getCurrentTime();
+      } catch (error) {
+        this.warn("VimeoEmbed: Could not get current time from player:", error);
+      }
+    }
+    return 0;
+  }
+
+  /**
+   * Request fullscreen mode
+   */
+  enterFullscreen(): Promise<void> {
+    const elem = this as any;
+    if (elem.requestFullscreen) {
+      return elem.requestFullscreen();
+    } else if (elem.webkitRequestFullscreen) {
+      return elem.webkitRequestFullscreen();
+    } else if (elem.mozRequestFullScreen) {
+      return elem.mozRequestFullScreen();
+    } else if (elem.msRequestFullscreen) {
+      return elem.msRequestFullscreen();
+    }
+    return Promise.reject(new Error("Fullscreen API not supported"));
+  }
+
+  /**
+   * Exit fullscreen mode
+   */
+  exitFullscreen(): Promise<void> {
+    const doc = document as any;
+    if (doc.exitFullscreen) {
+      return doc.exitFullscreen();
+    } else if (doc.webkitExitFullscreen) {
+      return doc.webkitExitFullscreen();
+    } else if (doc.mozCancelFullScreen) {
+      return doc.mozCancelFullScreen();
+    } else if (doc.msExitFullscreen) {
+      return doc.msExitFullscreen();
+    }
+    return Promise.reject(new Error("Fullscreen API not supported"));
+  }
+
+  /**
+   * Toggle fullscreen mode
+   */
+  async toggleFullscreen(): Promise<void> {
+    if (this.isFullscreen()) {
+      await this.exitFullscreen();
+    } else {
+      await this.enterFullscreen();
+    }
+  }
+
+  /**
+   * Check if currently in fullscreen mode
+   */
+  isFullscreen(): boolean {
+    const doc = document as any;
+    return !!(
+      doc.fullscreenElement ||
+      doc.webkitFullscreenElement ||
+      doc.mozFullScreenElement ||
+      doc.msFullscreenElement
+    );
+  }
+
+  /**
+   * Get available quality levels for the current video
+   * @returns Array of available quality levels
+   */
+  async getAvailableQualities(): Promise<string[]> {
+    if (this.player && this.playerReady) {
+      try {
+        return (await this.player.getQualities()) || [];
+      } catch (error) {
+        this.warn("VimeoEmbed: Could not get available qualities:", error);
+      }
+    }
+    return [];
+  }
+
+  /**
+   * Get the current playback quality
+   * @returns Current quality level
+   */
+  async getCurrentQuality(): Promise<string> {
+    if (this.player && this.playerReady) {
+      try {
+        return (await this.player.getQuality()) || "auto";
+      } catch (error) {
+        this.warn("VimeoEmbed: Could not get current quality:", error);
+      }
+    }
+    return "auto";
+  }
+
+  /**
+   * Set the playback quality
+   * @param quality The desired quality level
+   */
+  async setQuality(quality: string): Promise<void> {
+    if (!this.player || !this.playerReady) {
+      this.warn("VimeoEmbed: Player not ready for quality change");
+      return;
+    }
+
+    try {
+      const oldQuality = await this.getCurrentQuality();
+      await this.player.setQuality(quality);
+
+      // Dispatch quality change event
+      const event = new CustomEvent("qualitychange", {
+        detail: {
+          oldQuality,
+          newQuality: quality,
+          availableQualities: await this.getAvailableQualities(),
+        },
+        bubbles: true,
+        composed: true,
+      });
+      this.dispatchEvent(event);
+    } catch (error) {
+      this.warn("VimeoEmbed: Could not set quality:", error);
+    }
+  }
+
+  public loadVideo(videoIdOrUrl: string) {
+    const extracted = this.extractVideoId(videoIdOrUrl);
+    if (extracted) {
+      this.#url = videoIdOrUrl;
+      this.#videoId = extracted;
+    } else {
+      this.#videoId = videoIdOrUrl;
+    }
+
+    if (this.#lazy && !this.player) {
+      try {
+        this.initializePlayer(this.#videoId);
+      } catch (error) {
+        this.warn("VimeoEmbed: loadVideo failed to initialize player:", error);
+      }
+      return;
+    }
+
+    if (this.initialized) {
+      this.reinitializePlayer();
+    }
+  }
+}
+
+customElements.define("vimeo-embed", VimeoEmbed);
+
+declare global {
+  interface Window {
+    Vimeo?: any;
+  }
+}
+
+export {};