@smartimpact-it/modern-video-embed 2.0.1

package/dist/components/YouTubeEmbed.js

@@ -0,0 +1,1354 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _YouTubeEmbed_instances, _YouTubeEmbed_url, _YouTubeEmbed_videoId, _YouTubeEmbed_autoplay, _YouTubeEmbed_muted, _YouTubeEmbed_controls, _YouTubeEmbed_lazy, _YouTubeEmbed_poster, _YouTubeEmbed_playing, _YouTubeEmbed_background, _YouTubeEmbed_playerVars, _YouTubeEmbed_reflectBooleanAttribute, _YouTubeEmbed_updateBackgroundMode;
+export class YouTubeEmbed extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _YouTubeEmbed_instances.add(this);
+        this.iframe = null;
+        this.player = null;
+        this.playerReady = false;
+        this.playPauseButton = null;
+        this.initialized = false;
+        this.setCustomControlState = null;
+        this.updatingAttribute = false; // Flag to prevent recursive attribute updates
+        this.updatingMutedState = false; // Flag to prevent sync from overwriting programmatic mute changes
+        /** The full YouTube URL (e.g., "https://www.youtube.com/watch?v=...") */
+        _YouTubeEmbed_url.set(this, "");
+        /** The 11-character YouTube video ID. */
+        _YouTubeEmbed_videoId.set(this, "");
+        /** Whether the video should autoplay when loaded. Requires `muted` to be true. */
+        _YouTubeEmbed_autoplay.set(this, false);
+        /** Whether the video audio is muted. */
+        _YouTubeEmbed_muted.set(this, false);
+        /** Whether to show the native YouTube player controls. */
+        _YouTubeEmbed_controls.set(this, false);
+        /** Whether to lazy-load the video, showing a poster image until interaction. */
+        _YouTubeEmbed_lazy.set(this, false);
+        /** URL for a custom poster image. Defaults to YouTube's thumbnail. */
+        _YouTubeEmbed_poster.set(this, "");
+        /** Read-only property to check if the video is currently playing. */
+        _YouTubeEmbed_playing.set(this, false);
+        /** Whether the video should act as a background, covering its container. */
+        _YouTubeEmbed_background.set(this, false);
+        /** Extra parameters to pass to the YouTube player. */
+        _YouTubeEmbed_playerVars.set(this, {});
+        // Declare the event listener properties
+        this.posterClickHandler = null;
+        this.keyboardHandler = null;
+        this.ariaLiveRegion = null;
+        this.apiLoadRetries = 0;
+        this.intersectionObserver = null;
+        this.hasLoadedVideo = false;
+    }
+    static get observedAttributes() {
+        return [
+            "url",
+            "video-id",
+            "autoplay",
+            "controls",
+            "lazy",
+            "muted",
+            "poster",
+            "background",
+            "player-vars",
+            "quality",
+        ];
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        // Skip processing if we're currently updating an attribute to prevent infinite loops
+        if (this.updatingAttribute) {
+            return;
+        }
+        this.log(`YouTubeEmbed: Attribute changed - ${name}: ${oldValue} -> ${newValue}`);
+        switch (name) {
+            case "url":
+                __classPrivateFieldSet(this, _YouTubeEmbed_url, newValue || "", "f");
+                __classPrivateFieldSet(this, _YouTubeEmbed_videoId, this.extractVideoId(__classPrivateFieldGet(this, _YouTubeEmbed_url, "f")), "f");
+                if (this.initialized) {
+                    this.reinitializePlayer();
+                }
+                break;
+            case "video-id":
+                __classPrivateFieldSet(this, _YouTubeEmbed_videoId, newValue || "", "f");
+                if (this.initialized) {
+                    this.reinitializePlayer();
+                }
+                break;
+            case "autoplay":
+                __classPrivateFieldSet(this, _YouTubeEmbed_autoplay, newValue !== null, "f");
+                if (!__classPrivateFieldGet(this, _YouTubeEmbed_playing, "f") &&
+                    __classPrivateFieldGet(this, _YouTubeEmbed_autoplay, "f") &&
+                    !__classPrivateFieldGet(this, _YouTubeEmbed_lazy, "f") &&
+                    this.initialized) {
+                    this.play();
+                }
+                break;
+            case "controls":
+                __classPrivateFieldSet(this, _YouTubeEmbed_controls, newValue !== null, "f");
+                if (this.initialized) {
+                    this.reinitializePlayer();
+                }
+                break;
+            case "lazy":
+                __classPrivateFieldSet(this, _YouTubeEmbed_lazy, newValue !== null, "f");
+                break;
+            case "muted":
+                __classPrivateFieldSet(this, _YouTubeEmbed_muted, newValue !== null, "f");
+                if (this.player && this.playerReady) {
+                    if (__classPrivateFieldGet(this, _YouTubeEmbed_muted, "f")) {
+                        this.player.mute();
+                    }
+                    else {
+                        this.player.unMute();
+                    }
+                }
+                break;
+            case "poster":
+                __classPrivateFieldSet(this, _YouTubeEmbed_poster, newValue || "", "f");
+                if (__classPrivateFieldGet(this, _YouTubeEmbed_lazy, "f") && !this.player) {
+                    this.showPoster(__classPrivateFieldGet(this, _YouTubeEmbed_videoId, "f"));
+                }
+                break;
+            case "background":
+                __classPrivateFieldSet(this, _YouTubeEmbed_background, newValue !== null, "f");
+                __classPrivateFieldGet(this, _YouTubeEmbed_instances, "m", _YouTubeEmbed_updateBackgroundMode).call(this);
+                break;
+            case "player-vars":
+                try {
+                    __classPrivateFieldSet(this, _YouTubeEmbed_playerVars, newValue ? JSON.parse(newValue) : {}, "f");
+                }
+                catch (e) {
+                    this.error("YouTubeEmbed: Invalid player-vars JSON:", e);
+                    __classPrivateFieldSet(this, _YouTubeEmbed_playerVars, {}, "f");
+                }
+                if (this.initialized) {
+                    this.reinitializePlayer();
+                }
+                break;
+            case "quality":
+                if (newValue && this.player && this.playerReady) {
+                    this.setQuality(newValue);
+                }
+                break;
+        }
+    }
+    // Getters and setters for attributes
+    /**
+     * Gets or sets the full YouTube URL.
+     * When set, it automatically extracts the video ID and reinitializes the player.
+     */
+    get url() {
+        return __classPrivateFieldGet(this, _YouTubeEmbed_url, "f");
+    }
+    set url(value) {
+        __classPrivateFieldSet(this, _YouTubeEmbed_url, value, "f");
+        __classPrivateFieldSet(this, _YouTubeEmbed_videoId, this.extractVideoId(value), "f");
+        if (this.initialized) {
+            this.reinitializePlayer();
+        }
+    }
+    /**
+     * Gets or sets the 11-character YouTube video ID.
+     * Reinitializes the player when set.
+     */
+    get videoId() {
+        return __classPrivateFieldGet(this, _YouTubeEmbed_videoId, "f");
+    }
+    set videoId(value) {
+        __classPrivateFieldSet(this, _YouTubeEmbed_videoId, value, "f");
+        if (this.initialized) {
+            this.reinitializePlayer();
+        }
+    }
+    /**
+     * Gets or sets the autoplay state.
+     * Note: Autoplay is subject to browser policies and usually requires the video to be muted.
+     */
+    get autoplay() {
+        return __classPrivateFieldGet(this, _YouTubeEmbed_autoplay, "f");
+    }
+    set autoplay(value) {
+        __classPrivateFieldSet(this, _YouTubeEmbed_autoplay, value, "f");
+        __classPrivateFieldGet(this, _YouTubeEmbed_instances, "m", _YouTubeEmbed_reflectBooleanAttribute).call(this, "autoplay", value);
+        if (!__classPrivateFieldGet(this, _YouTubeEmbed_playing, "f") && value && !__classPrivateFieldGet(this, _YouTubeEmbed_lazy, "f") && this.initialized) {
+            this.play();
+        }
+    }
+    /**
+     * Gets or sets whether native YouTube player controls are visible.
+     */
+    get controls() {
+        return __classPrivateFieldGet(this, _YouTubeEmbed_controls, "f");
+    }
+    set controls(value) {
+        __classPrivateFieldSet(this, _YouTubeEmbed_controls, value, "f");
+        __classPrivateFieldGet(this, _YouTubeEmbed_instances, "m", _YouTubeEmbed_reflectBooleanAttribute).call(this, "controls", value);
+        if (this.initialized) {
+            this.reinitializePlayer();
+        }
+    }
+    /**
+     * Gets or sets the lazy-loading behavior.
+     * If true, a poster is shown, and the video loads only on user interaction.
+     */
+    get lazy() {
+        return __classPrivateFieldGet(this, _YouTubeEmbed_lazy, "f");
+    }
+    set lazy(value) {
+        __classPrivateFieldSet(this, _YouTubeEmbed_lazy, value, "f");
+        __classPrivateFieldGet(this, _YouTubeEmbed_instances, "m", _YouTubeEmbed_reflectBooleanAttribute).call(this, "lazy", value);
+    }
+    /**
+     * Gets or sets the muted state of the video.
+     */
+    get muted() {
+        return __classPrivateFieldGet(this, _YouTubeEmbed_muted, "f");
+    }
+    set muted(value) {
+        __classPrivateFieldSet(this, _YouTubeEmbed_muted, value, "f");
+        __classPrivateFieldGet(this, _YouTubeEmbed_instances, "m", _YouTubeEmbed_reflectBooleanAttribute).call(this, "muted", value);
+        if (this.player && this.playerReady) {
+            this.updatingMutedState = true;
+            if (value) {
+                this.player.mute();
+            }
+            else {
+                this.player.unMute();
+            }
+            // Reset flag after a short delay to allow YouTube API to process
+            setTimeout(() => {
+                this.updatingMutedState = false;
+            }, 100);
+        }
+    }
+    /**
+     * Gets or sets the URL for a custom poster image.
+     * If not set, a default YouTube thumbnail is used for lazy-loaded videos.
+     */
+    get poster() {
+        return __classPrivateFieldGet(this, _YouTubeEmbed_poster, "f");
+    }
+    set poster(value) {
+        __classPrivateFieldSet(this, _YouTubeEmbed_poster, value, "f");
+        this.updatingAttribute = true;
+        if (value) {
+            this.setAttribute("poster", value);
+        }
+        else {
+            this.removeAttribute("poster");
+        }
+        this.updatingAttribute = false;
+        if (__classPrivateFieldGet(this, _YouTubeEmbed_lazy, "f") && !this.player) {
+            this.showPoster(__classPrivateFieldGet(this, _YouTubeEmbed_videoId, "f"));
+        }
+    }
+    /**
+     * Returns `true` if the video is currently playing.
+     */
+    get playing() {
+        return __classPrivateFieldGet(this, _YouTubeEmbed_playing, "f");
+    }
+    /**
+     * Gets or sets the background mode.
+     * In background mode, the video covers its container, is muted, and has no controls.
+     */
+    get background() {
+        return __classPrivateFieldGet(this, _YouTubeEmbed_background, "f");
+    }
+    set background(value) {
+        __classPrivateFieldSet(this, _YouTubeEmbed_background, value, "f");
+        __classPrivateFieldGet(this, _YouTubeEmbed_instances, "m", _YouTubeEmbed_reflectBooleanAttribute).call(this, "background", value);
+        __classPrivateFieldGet(this, _YouTubeEmbed_instances, "m", _YouTubeEmbed_updateBackgroundMode).call(this);
+    }
+    /**
+     * Gets or sets extra player parameters.
+     * @param {Record<string, string | number | boolean>} vars - An object of key-value pairs to pass to the player.
+     */
+    get playerVars() {
+        return __classPrivateFieldGet(this, _YouTubeEmbed_playerVars, "f");
+    }
+    set playerVars(vars) {
+        __classPrivateFieldSet(this, _YouTubeEmbed_playerVars, vars, "f");
+        this.setAttribute("player-vars", JSON.stringify(vars));
+        if (this.initialized) {
+            this.reinitializePlayer();
+        }
+    }
+    extractVideoId(url) {
+        if (!url)
+            return "";
+        // Comprehensive regex to handle various YouTube URL formats
+        const regex = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/;
+        const match = url.match(regex);
+        if (match && match[1]) {
+            return match[1];
+        }
+        // If it's already just an ID
+        if (/^[a-zA-Z0-9_-]{11}$/.test(url)) {
+            return url;
+        }
+        this.warn(`YouTubeEmbed: Could not extract video ID from "${url}"`);
+        return "";
+    }
+    log(...args) {
+        if (YouTubeEmbed.DEBUG) {
+            console.log("YouTubeEmbed:", ...args);
+        }
+    }
+    warn(...args) {
+        console.warn(...args);
+    }
+    error(...args) {
+        console.error(...args);
+    }
+    dispatchCustomEvent(eventName, detail) {
+        this.dispatchEvent(new CustomEvent(eventName, {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    isValidPosterUrl(url) {
+        if (!url)
+            return false;
+        try {
+            new URL(url);
+            // Exclude known problematic domains
+            return true;
+        }
+        catch (_a) {
+            return false;
+        }
+    }
+    /**
+     * Setup fullscreen change event listener
+     */
+    setupFullscreenListener() {
+        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
+     */
+    setupKeyboardHandlers() {
+        this.keyboardHandler = (e) => {
+            var _a, _b;
+            // Only handle if player is ready and not in input element
+            if (!this.playerReady || ((_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === "INPUT") {
+                return;
+            }
+            switch (e.key.toLowerCase()) {
+                case "k":
+                case " ":
+                    // Play/Pause
+                    e.preventDefault();
+                    this.togglePlay();
+                    this.announceToScreenReader(__classPrivateFieldGet(this, _YouTubeEmbed_playing, "f") ? "Video playing" : "Video paused");
+                    break;
+                case "m":
+                    // Mute/Unmute
+                    e.preventDefault();
+                    this.toggleMute();
+                    (_b = this.player) === null || _b === void 0 ? void 0 : _b.isMuted().then((muted) => {
+                        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);
+    }
+    /**
+     * Announce message to screen readers
+     */
+    announceToScreenReader(message) {
+        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 YouTube domains
+     */
+    addResourceHints() {
+        const hints = [
+            { rel: "preconnect", href: "https://www.youtube.com" },
+            { rel: "preconnect", href: "https://i.ytimg.com" },
+            { rel: "dns-prefetch", href: "https://www.youtube.com" },
+            { rel: "dns-prefetch", href: "https://i.ytimg.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
+     */
+    setupIntersectionObserver() {
+        if (!("IntersectionObserver" in window)) {
+            // Fallback: load immediately if IntersectionObserver not supported
+            return;
+        }
+        const options = {
+            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("YouTubeEmbed: 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(__classPrivateFieldGet(this, _YouTubeEmbed_videoId, "f"));
+                    }
+                    // Disconnect observer after loading
+                    if (this.intersectionObserver) {
+                        this.intersectionObserver.disconnect();
+                    }
+                }
+            });
+        }, options);
+        this.intersectionObserver.observe(this);
+    }
+    /**
+     * Display error message to user with retry option
+     */
+    showErrorMessage(message) {
+        const errorDiv = document.createElement("div");
+        errorDiv.className = "youtube-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 (__classPrivateFieldGet(this, _YouTubeEmbed_videoId, "f")) {
+                    this.initializePlayer(__classPrivateFieldGet(this, _YouTubeEmbed_videoId, "f"));
+                }
+            });
+        }
+        // Clear existing content
+        this.innerHTML = "";
+        this.appendChild(errorDiv);
+    }
+    connectedCallback() {
+        YouTubeEmbed.instanceCount++;
+        this.log("YouTubeEmbed: connectedCallback called, instance count:", YouTubeEmbed.instanceCount);
+        // Add resource hints on first instance
+        if (YouTubeEmbed.instanceCount === 1) {
+            this.addResourceHints();
+        }
+        // Initialize attributes from HTML
+        const urlAttr = this.getAttribute("url");
+        const videoIdAttr = this.getAttribute("video-id");
+        if (urlAttr) {
+            __classPrivateFieldSet(this, _YouTubeEmbed_url, urlAttr, "f");
+            __classPrivateFieldSet(this, _YouTubeEmbed_videoId, this.extractVideoId(urlAttr), "f");
+        }
+        else if (videoIdAttr) {
+            __classPrivateFieldSet(this, _YouTubeEmbed_videoId, videoIdAttr, "f");
+        }
+        // Set boolean attributes
+        __classPrivateFieldSet(this, _YouTubeEmbed_autoplay, this.hasAttribute("autoplay"), "f");
+        __classPrivateFieldSet(this, _YouTubeEmbed_controls, this.hasAttribute("controls"), "f");
+        __classPrivateFieldSet(this, _YouTubeEmbed_lazy, this.hasAttribute("lazy"), "f");
+        __classPrivateFieldSet(this, _YouTubeEmbed_muted, this.hasAttribute("muted"), "f");
+        __classPrivateFieldSet(this, _YouTubeEmbed_background, this.hasAttribute("background"), "f");
+        // Set string attributes
+        __classPrivateFieldSet(this, _YouTubeEmbed_poster, this.getAttribute("poster") || "", "f");
+        try {
+            const playerVarsAttr = this.getAttribute("player-vars");
+            __classPrivateFieldSet(this, _YouTubeEmbed_playerVars, playerVarsAttr ? JSON.parse(playerVarsAttr) : {}, "f");
+        }
+        catch (e) {
+            this.error("YouTubeEmbed: Invalid player-vars JSON on init:", e);
+            __classPrivateFieldSet(this, _YouTubeEmbed_playerVars, {}, "f");
+        }
+        if (!__classPrivateFieldGet(this, _YouTubeEmbed_videoId, "f")) {
+            this.error("YouTubeEmbed: Missing or invalid video ID");
+            this.dispatchCustomEvent("error", {
+                message: "Missing or invalid video ID",
+            });
+            return;
+        }
+        // Use the element itself as the container
+        this.classList.add("youtube-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();
+        __classPrivateFieldGet(this, _YouTubeEmbed_instances, "m", _YouTubeEmbed_updateBackgroundMode).call(this);
+        if (__classPrivateFieldGet(this, _YouTubeEmbed_lazy, "f")) {
+            this.showPoster(__classPrivateFieldGet(this, _YouTubeEmbed_videoId, "f"));
+            // Setup Intersection Observer for better performance
+            this.setupIntersectionObserver();
+        }
+        else {
+            // Initialize the player immediately
+            this.initializePlayer(__classPrivateFieldGet(this, _YouTubeEmbed_videoId, "f"));
+        }
+        this.initialized = true;
+        this.dispatchCustomEvent("connected");
+    }
+    disconnectedCallback() {
+        YouTubeEmbed.instanceCount--;
+        this.log("YouTubeEmbed: disconnectedCallback called, remaining instances:", YouTubeEmbed.instanceCount);
+        // Stop the video and destroy the player instance
+        if (this.player) {
+            try {
+                this.player.destroy();
+                this.log("YouTubeEmbed: Player destroyed.");
+            }
+            catch (error) {
+                this.warn("YouTubeEmbed: Error destroying player:", error);
+            }
+            this.player = null;
+        }
+        // Remove keyboard event handlers
+        if (this.keyboardHandler) {
+            this.removeEventListener("keydown", this.keyboardHandler);
+            this.keyboardHandler = null;
+        }
+        // Remove event listeners from poster and play button
+        const poster = this.querySelector(".youtube-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);
+        }
+        // Clear element content
+        this.innerHTML = "";
+        this.classList.remove("youtube-embed-wrapper", "youtube-embed-container", "is-playing");
+        // Only clean up global resources if this is the last instance
+        if (YouTubeEmbed.instanceCount === 0) {
+            this.log("YouTubeEmbed: Last instance, cleaning up global resources");
+            // Remove the YouTube API script
+            const script = document.querySelector('script[src="https://www.youtube.com/iframe_api"]');
+            if (script) {
+                script.remove();
+                this.log("YouTubeEmbed: YouTube API script removed.");
+            }
+            // Clear global references
+            if (window.onYouTubeIframeAPIReady) {
+                delete window.onYouTubeIframeAPIReady;
+            }
+            // Reset static flags
+            YouTubeEmbed.apiLoaded = false;
+            YouTubeEmbed.apiReady = false;
+        }
+        // Nullify DOM references
+        this.iframe = null;
+        this.playPauseButton = null;
+        this.setCustomControlState = null;
+        // Dispatch disconnected event
+        this.dispatchCustomEvent("disconnected");
+        this.log("YouTubeEmbed: Cleanup complete.");
+    }
+    reinitializePlayer() {
+        if (!this.initialized || !__classPrivateFieldGet(this, _YouTubeEmbed_videoId, "f")) {
+            return;
+        }
+        // Remove existing player
+        if (this.player) {
+            try {
+                this.player.destroy();
+            }
+            catch (error) {
+                this.warn("YouTubeEmbed: Error destroying player:", error);
+            }
+        }
+        // Clear and reinitialize
+        if (__classPrivateFieldGet(this, _YouTubeEmbed_lazy, "f")) {
+            this.showPoster(__classPrivateFieldGet(this, _YouTubeEmbed_videoId, "f"));
+        }
+        else {
+            this.initializePlayer(__classPrivateFieldGet(this, _YouTubeEmbed_videoId, "f"));
+        }
+    }
+    showPoster(videoId) {
+        // Use custom poster if valid, otherwise use YouTube thumbnail
+        const thumbnailUrl = this.isValidPosterUrl(__classPrivateFieldGet(this, _YouTubeEmbed_poster, "f"))
+            ? __classPrivateFieldGet(this, _YouTubeEmbed_poster, "f")
+            : `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;
+        this.log("YouTubeEmbed: Using poster URL:", thumbnailUrl);
+        // Clear any existing content and event listeners
+        this.innerHTML = "";
+        // Clear old event listeners if they exist
+        if (this.posterClickHandler) {
+            this.posterClickHandler = null;
+        }
+        // Create poster image
+        const poster = document.createElement("img");
+        poster.src = thumbnailUrl;
+        poster.alt = "YouTube Video Thumbnail";
+        poster.classList.add("youtube-poster", "video-poster"); // Add both classes for compatibility
+        poster.loading = "lazy"; // Optimize image loading
+        // Add error handling for poster loading
+        poster.onerror = () => {
+            this.warn("YouTubeEmbed: Poster failed to load, using white background.");
+            poster.style.display = "none";
+            this.style.backgroundColor = "#FFFFFF";
+        };
+        // Create button overlay with play button
+        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);
+        // Handle click to load video - store reference for cleanup
+        const loadVideo = () => {
+            this.log("YouTubeEmbed: Loading video from poster click");
+            this.setAttribute("data-poster-autoplay", "true");
+            try {
+                this.initializePlayer(videoId);
+            }
+            catch (error) {
+                this.error("YouTubeEmbed: Error initializing player from poster:", error);
+                this.dispatchCustomEvent("error", { message: "Failed to load video" });
+            }
+        };
+        // Store reference for cleanup
+        this.posterClickHandler = loadVideo;
+        // Add keyboard support
+        const keyboardActivate = (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                loadVideo(e);
+            }
+        };
+        poster.addEventListener("click", loadVideo);
+        buttonOverlay.addEventListener("click", loadVideo);
+        buttonOverlay.addEventListener("keydown", keyboardActivate);
+        this.appendChild(poster);
+        this.appendChild(buttonOverlay);
+        this.log("YouTubeEmbed: Poster displayed for lazy loading");
+    }
+    initializePlayer(videoId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.log("YouTubeEmbed: Initializing player for video ID:", videoId);
+            const isBackground = __classPrivateFieldGet(this, _YouTubeEmbed_background, "f");
+            // Background videos must autoplay and be muted, with no controls.
+            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; // Mute if background or if autoplaying
+            // Remove the temporary autoplay flags
+            if (this.hasAttribute("data-poster-autoplay")) {
+                this.removeAttribute("data-poster-autoplay");
+            }
+            if (this.hasAttribute("data-should-autoplay")) {
+                this.removeAttribute("data-should-autoplay");
+            }
+            this.log("YouTubeEmbed: Creating iframe with autoplay:", autoplay, "controls:", controls);
+            this.iframe = document.createElement("iframe");
+            // Build URL parameters to handle YouTube's strict policies
+            const params = new URLSearchParams(Object.assign({ enablejsapi: "1", autoplay: autoplay ? "1" : "0", controls: !controls && !isBackground ? "1" : "0", mute: mute ? "1" : "0", playsinline: "1", rel: "0", modestbranding: "1", origin: window.location.origin || "localhost" }, __classPrivateFieldGet(this, _YouTubeEmbed_playerVars, "f")));
+            // Add muted state if explicitly set
+            if (__classPrivateFieldGet(this, _YouTubeEmbed_muted, "f")) {
+                params.set("mute", "1");
+            }
+            // Update internal muted state if autoplay forces muting
+            if (autoplay && !__classPrivateFieldGet(this, _YouTubeEmbed_muted, "f")) {
+                __classPrivateFieldSet(this, _YouTubeEmbed_muted, true, "f");
+                this.log("YouTubeEmbed: Autoplay enabled, forcing muted state for compliance");
+            }
+            this.iframe.src = `https://www.youtube.com/embed/${videoId}?${params.toString()}`;
+            this.iframe.allow =
+                "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
+            this.iframe.allowFullscreen = true;
+            this.iframe.style.position = "absolute";
+            this.iframe.style.border = "none";
+            // Disable pointer events in background mode to allow clicks to pass through
+            if (__classPrivateFieldGet(this, _YouTubeEmbed_background, "f")) {
+                this.iframe.style.pointerEvents = "none";
+                // CSS handles the sizing for background videos
+            }
+            else {
+                this.iframe.style.top = "0";
+                this.iframe.style.left = "0";
+                this.iframe.style.width = "100%";
+                this.iframe.style.height = "100%";
+            }
+            this.log("YouTubeEmbed: Iframe created with src:", this.iframe.src);
+            this.replaceChildren(this.iframe);
+            if (!controls) {
+                this.addCustomControls();
+            }
+            // Initialize the YouTube API player for advanced control
+            try {
+                yield YouTubeEmbed.loadYouTubeAPIWithRetry(this.apiLoadRetries);
+                this.player = new YT.Player(this.iframe, {
+                    videoId,
+                    events: {
+                        onReady: () => {
+                            this.log("YouTubeEmbed: Player is ready.");
+                            this.playerReady = true;
+                            // Sync muted state with YouTube player
+                            if (__classPrivateFieldGet(this, _YouTubeEmbed_muted, "f")) {
+                                this.player.mute();
+                            }
+                            else {
+                                this.player.unMute();
+                            }
+                            // Check if autoplay was enabled during initialization and update custom control state
+                            if (autoplay && this.setCustomControlState) {
+                                this.setCustomControlState(true);
+                                __classPrivateFieldSet(this, _YouTubeEmbed_playing, true, "f");
+                            }
+                            this.dispatchCustomEvent("ready");
+                        },
+                        onStateChange: (event) => {
+                            const isPlaying = event.data === YT.PlayerState.PLAYING;
+                            const isPaused = event.data === YT.PlayerState.PAUSED;
+                            const isEnded = event.data === YT.PlayerState.ENDED;
+                            __classPrivateFieldSet(this, _YouTubeEmbed_playing, isPlaying, "f");
+                            // Sync muted state with actual player state (only if not programmatically updating)
+                            try {
+                                if (!this.updatingMutedState &&
+                                    this.player &&
+                                    typeof this.player.isMuted === "function") {
+                                    const actualMuted = this.player.isMuted();
+                                    if (actualMuted !== __classPrivateFieldGet(this, _YouTubeEmbed_muted, "f")) {
+                                        __classPrivateFieldSet(this, _YouTubeEmbed_muted, actualMuted, "f");
+                                        this.log("YouTubeEmbed: Synced muted state:", actualMuted);
+                                    }
+                                }
+                            }
+                            catch (error) {
+                                this.warn("YouTubeEmbed: Could not sync muted state:", error);
+                            }
+                            // Update custom control state based on player state
+                            if (this.setCustomControlState) {
+                                this.setCustomControlState(isPlaying);
+                            }
+                            // Dispatch appropriate events
+                            if (isPlaying) {
+                                this.dispatchCustomEvent("play");
+                            }
+                            else if (isPaused) {
+                                this.dispatchCustomEvent("pause");
+                            }
+                            else if (isEnded) {
+                                this.dispatchCustomEvent("ended");
+                            }
+                        },
+                        onError: (event) => {
+                            this.error("YouTubeEmbed: Player encountered an error:", event);
+                            let errorMessage = "Unknown error occurred";
+                            // Handle specific YouTube error codes
+                            switch (event.data) {
+                                case 2:
+                                    errorMessage = "Invalid video ID";
+                                    break;
+                                case 5:
+                                    errorMessage = "HTML5 player error";
+                                    break;
+                                case 100:
+                                    errorMessage = "Video not found or private";
+                                    break;
+                                case 101:
+                                case 150:
+                                    errorMessage =
+                                        "Video cannot be embedded (restrictions by owner)";
+                                    break;
+                                default:
+                                    errorMessage = `YouTube error code: ${event.data}`;
+                            }
+                            this.dispatchCustomEvent("error", {
+                                message: errorMessage,
+                                code: event.data,
+                            });
+                        },
+                    },
+                });
+            }
+            catch (error) {
+                this.error("YouTubeEmbed: YouTube API initialization failed:", error);
+                this.showErrorMessage(error instanceof Error
+                    ? error.message
+                    : "Failed to load YouTube 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,
+                });
+            }
+        });
+    }
+    static loadYouTubeAPI() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                if (this.apiReady) {
+                    resolve();
+                    return;
+                }
+                const timeoutId = setTimeout(() => {
+                    cleanup();
+                    reject(new Error("YouTube API loading timeout. The API script may be blocked by an ad blocker or network issue."));
+                }, this.API_LOAD_TIMEOUT);
+                const cleanup = () => {
+                    clearTimeout(timeoutId);
+                    delete window.onYouTubeIframeAPIReady;
+                };
+                if (!this.apiLoaded) {
+                    const script = document.createElement("script");
+                    script.src = "https://www.youtube.com/iframe_api";
+                    script.onerror = () => {
+                        cleanup();
+                        reject(new Error("Failed to load YouTube API script. Please check your network connection or disable ad blockers."));
+                    };
+                    document.head.appendChild(script);
+                    this.apiLoaded = true;
+                }
+                window.onYouTubeIframeAPIReady = () => {
+                    this.apiReady = true;
+                    cleanup();
+                    resolve();
+                };
+            });
+        });
+    }
+    /**
+     * Load YouTube API with retry mechanism
+     */
+    static loadYouTubeAPIWithRetry() {
+        return __awaiter(this, arguments, void 0, function* (retries = 0) {
+            try {
+                yield this.loadYouTubeAPI();
+            }
+            catch (error) {
+                if (retries < this.MAX_API_RETRIES) {
+                    console.warn(`YouTubeEmbed: API load failed, retrying (${retries + 1}/${this.MAX_API_RETRIES})...`);
+                    yield new Promise((resolve) => setTimeout(resolve, this.API_RETRY_DELAY));
+                    return this.loadYouTubeAPIWithRetry(retries + 1);
+                }
+                throw error;
+            }
+        });
+    }
+    addCustomControls() {
+        this.classList.add("youtube-embed-container");
+        // Create button overlay
+        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) => {
+            isPlaying = playing;
+            if (playing) {
+                this.classList.add("is-playing");
+            }
+            else {
+                this.classList.remove("is-playing");
+            }
+        };
+        const togglePlayPause = () => {
+            if (isPlaying) {
+                // Pause the video
+                if (this.player && typeof this.player.pauseVideo === "function") {
+                    this.player.pauseVideo();
+                }
+                else if (this.iframe && this.iframe.contentWindow) {
+                    this.iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', "*");
+                }
+                setPlayingState(false);
+            }
+            else {
+                // Play the video
+                if (this.player && typeof this.player.playVideo === "function") {
+                    this.player.playVideo();
+                }
+                else if (this.iframe && this.iframe.contentWindow) {
+                    this.iframe.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', "*");
+                }
+                setPlayingState(true);
+            }
+        };
+        // Store reference to setPlayingState for external control
+        this.setCustomControlState = setPlayingState;
+        buttonOverlay.addEventListener("click", togglePlayPause);
+        if (this.playPauseButton) {
+            buttonOverlay.appendChild(this.playPauseButton);
+        }
+        this.appendChild(buttonOverlay);
+    }
+    // Update the playVideo method to wait for the player to be ready
+    /**
+     * Plays the video. If the video is lazy-loaded and not yet initialized, it will be loaded first.
+     */
+    play() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Check if this is a lazy-loaded video that hasn't been initialized yet
+            if (__classPrivateFieldGet(this, _YouTubeEmbed_lazy, "f") && !this.player && !this.iframe) {
+                this.log("YouTubeEmbed: Lazy video needs to be loaded first. Initializing...");
+                // Set a flag to auto-play after initialization
+                this.setAttribute("data-should-autoplay", "true");
+                // Initialize the player (this will load the video and replace the poster)
+                yield this.initializePlayer(__classPrivateFieldGet(this, _YouTubeEmbed_videoId, "f"));
+                // Wait a bit for the player to be ready after initialization
+                yield new Promise((resolve) => setTimeout(resolve, 1000));
+            }
+            if (!this.playerReady) {
+                this.warn("YouTubeEmbed: Player is not ready. Waiting for initialization.");
+                yield new Promise((resolve) => {
+                    const interval = setInterval(() => {
+                        if (this.playerReady) {
+                            clearInterval(interval);
+                            resolve(null);
+                        }
+                    }, 100);
+                    // Timeout after 5 seconds
+                    setTimeout(() => {
+                        clearInterval(interval);
+                        resolve(null);
+                    }, 5000);
+                });
+            }
+            // Remove the autoplay flag if it was set
+            this.removeAttribute("data-should-autoplay");
+            if (this.player && typeof this.player.playVideo === "function") {
+                this.player.playVideo();
+                this.log("YouTubeEmbed: Video playback started via API.");
+            }
+            else {
+                this.log("YouTubeEmbed: Using iframe postMessage for play.");
+                // Fallback: try to use postMessage to control iframe
+                if (this.iframe && this.iframe.contentWindow) {
+                    this.iframe.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', "*");
+                }
+            }
+            __classPrivateFieldSet(this, _YouTubeEmbed_playing, true, "f");
+            // Update custom control state
+            if (this.setCustomControlState) {
+                this.setCustomControlState(true);
+            }
+            this.dispatchCustomEvent("play");
+        });
+    }
+    /**
+     * Pauses the currently playing video.
+     */
+    pause() {
+        if (this.player && typeof this.player.pauseVideo === "function") {
+            this.player.pauseVideo();
+            this.log("YouTubeEmbed: Video paused via API.");
+        }
+        else {
+            this.log("YouTubeEmbed: Using iframe postMessage for pause.");
+            // Fallback: try to use postMessage to control iframe
+            if (this.iframe && this.iframe.contentWindow) {
+                this.iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', "*");
+            }
+        }
+        __classPrivateFieldSet(this, _YouTubeEmbed_playing, false, "f");
+        // Update custom control state
+        if (this.setCustomControlState) {
+            this.setCustomControlState(false);
+        }
+        this.dispatchCustomEvent("pause");
+    }
+    /**
+     * Stops the video and resets it to the beginning.
+     */
+    stopVideo() {
+        if (this.player && typeof this.player.stopVideo === "function") {
+            this.player.stopVideo();
+            this.log("YouTubeEmbed: Video stopped via API.");
+        }
+        else {
+            this.log("YouTubeEmbed: Using iframe postMessage for stop.");
+            // Fallback: try to use postMessage to control iframe
+            if (this.iframe && this.iframe.contentWindow) {
+                this.iframe.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', "*");
+            }
+        }
+        __classPrivateFieldSet(this, _YouTubeEmbed_playing, false, "f");
+        // Update custom control state
+        if (this.setCustomControlState) {
+            this.setCustomControlState(false);
+        }
+        this.dispatchCustomEvent("stop");
+    }
+    /**
+     * Mutes the video audio.
+     */
+    mute() {
+        this.muted = true;
+    }
+    /**
+     * Unmutes the video audio.
+     */
+    unmute() {
+        this.muted = false;
+    }
+    /**
+     * Toggles the video between playing and paused.
+     */
+    togglePlay() {
+        if (__classPrivateFieldGet(this, _YouTubeEmbed_playing, "f")) {
+            this.pause();
+        }
+        else {
+            this.play();
+        }
+    }
+    /**
+     * Toggles the audio between muted and unmuted.
+     */
+    toggleMute() {
+        this.muted = !__classPrivateFieldGet(this, _YouTubeEmbed_muted, "f");
+    }
+    /**
+     * Toggles the debug logging for all component instances.
+     * @param {boolean} [forceState] - Optional: force debug mode on or off.
+     */
+    static toggleDebug(forceState) {
+        YouTubeEmbed.DEBUG =
+            forceState !== undefined ? forceState : !YouTubeEmbed.DEBUG;
+        console.log(`YouTubeEmbed: Debugging is now ${YouTubeEmbed.DEBUG ? "ENABLED" : "DISABLED"}.`);
+    }
+    // Public API for getting player state
+    /**
+     * Retrieves the current state of the player.
+     * @returns An object with the current player state.
+     */
+    getPlayerState() {
+        // Get actual muted state from YouTube player if available
+        let actualMutedState = __classPrivateFieldGet(this, _YouTubeEmbed_muted, "f");
+        if (this.player && this.playerReady) {
+            try {
+                actualMutedState = this.player.isMuted();
+                // Sync internal state with actual player state
+                if (actualMutedState !== __classPrivateFieldGet(this, _YouTubeEmbed_muted, "f")) {
+                    __classPrivateFieldSet(this, _YouTubeEmbed_muted, actualMutedState, "f");
+                }
+            }
+            catch (error) {
+                // Fallback to internal state if player method fails
+                this.warn("YouTubeEmbed: Could not get muted state from player:", error);
+            }
+        }
+        return {
+            playing: __classPrivateFieldGet(this, _YouTubeEmbed_playing, "f"),
+            muted: actualMutedState,
+            videoId: __classPrivateFieldGet(this, _YouTubeEmbed_videoId, "f"),
+            ready: this.playerReady,
+            initialized: this.initialized,
+        };
+    }
+    // Public API for checking if video is playing
+    /**
+     * Checks if the video is currently playing.
+     * @returns `true` if the video is playing.
+     */
+    isPlaying() {
+        return __classPrivateFieldGet(this, _YouTubeEmbed_playing, "f");
+    }
+    // Public API for checking if video is muted
+    /**
+     * Checks if the video is currently muted.
+     * @returns `true` if the video is muted.
+     */
+    isMuted() {
+        if (this.player && this.playerReady) {
+            try {
+                return this.player.isMuted();
+            }
+            catch (error) {
+                this.warn("YouTubeEmbed: Could not get muted state from player:", error);
+            }
+        }
+        return __classPrivateFieldGet(this, _YouTubeEmbed_muted, "f");
+    }
+    /**
+     * Request fullscreen mode
+     */
+    enterFullscreen() {
+        const elem = this;
+        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() {
+        const doc = document;
+        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
+     */
+    toggleFullscreen() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.isFullscreen()) {
+                yield this.exitFullscreen();
+            }
+            else {
+                yield this.enterFullscreen();
+            }
+        });
+    }
+    /**
+     * Check if currently in fullscreen mode
+     */
+    isFullscreen() {
+        const doc = document;
+        return !!(doc.fullscreenElement ||
+            doc.webkitFullscreenElement ||
+            doc.mozFullScreenElement ||
+            doc.msFullscreenElement);
+    }
+    /**
+     * Get available quality levels for the current video
+     * @returns Array of available quality levels
+     */
+    getAvailableQualities() {
+        if (this.player && this.playerReady) {
+            try {
+                return this.player.getAvailableQualityLevels() || [];
+            }
+            catch (error) {
+                this.warn("YouTubeEmbed: Could not get available qualities:", error);
+            }
+        }
+        return [];
+    }
+    /**
+     * Get the current playback quality
+     * @returns Current quality level
+     */
+    getCurrentQuality() {
+        if (this.player && this.playerReady) {
+            try {
+                return this.player.getPlaybackQuality() || "auto";
+            }
+            catch (error) {
+                this.warn("YouTubeEmbed: Could not get current quality:", error);
+            }
+        }
+        return "auto";
+    }
+    /**
+     * Set the playback quality
+     * @param quality The desired quality level
+     */
+    setQuality(quality) {
+        if (!this.player || !this.playerReady) {
+            this.warn("YouTubeEmbed: Player not ready for quality change");
+            return;
+        }
+        try {
+            const oldQuality = this.getCurrentQuality();
+            this.player.setPlaybackQuality(quality);
+            // Dispatch quality change event
+            const event = new CustomEvent("qualitychange", {
+                detail: {
+                    oldQuality,
+                    newQuality: quality,
+                    availableQualities: this.getAvailableQualities(),
+                },
+                bubbles: true,
+                composed: true,
+            });
+            this.dispatchEvent(event);
+        }
+        catch (error) {
+            this.warn("YouTubeEmbed: Could not set quality:", error);
+        }
+    }
+    // Public API for getting current playback time
+    /**
+     * Gets the current playback time in seconds.
+     * @returns The current time in seconds.
+     */
+    getCurrentTime() {
+        if (this.player && this.playerReady) {
+            try {
+                return this.player.getCurrentTime() || 0;
+            }
+            catch (error) {
+                this.warn("YouTubeEmbed: Could not get current time from player:", error);
+            }
+        }
+        return 0;
+    }
+    // Public API for setting video by ID or URL
+    /**
+     * Loads a new video by its ID or URL.
+     * @param videoIdOrUrl The 11-character video ID or the full YouTube URL.
+     */
+    loadVideo(videoIdOrUrl) {
+        // Determine if input is a full URL or a plain video ID
+        const extracted = this.extractVideoId(videoIdOrUrl);
+        if (extracted) {
+            __classPrivateFieldSet(this, _YouTubeEmbed_url, videoIdOrUrl, "f");
+            __classPrivateFieldSet(this, _YouTubeEmbed_videoId, extracted, "f");
+        }
+        else {
+            __classPrivateFieldSet(this, _YouTubeEmbed_videoId, videoIdOrUrl, "f");
+        }
+        // If component is lazy, load immediately when requested
+        if (__classPrivateFieldGet(this, _YouTubeEmbed_lazy, "f") && !this.player) {
+            try {
+                this.initializePlayer(__classPrivateFieldGet(this, _YouTubeEmbed_videoId, "f"));
+            }
+            catch (error) {
+                this.warn("YouTubeEmbed: loadVideo failed to initialize player:", error);
+            }
+            return;
+        }
+        // If already initialized, reinitialize player with the new video
+        if (this.initialized) {
+            this.reinitializePlayer();
+        }
+    }
+}
+_YouTubeEmbed_url = new WeakMap(), _YouTubeEmbed_videoId = new WeakMap(), _YouTubeEmbed_autoplay = new WeakMap(), _YouTubeEmbed_muted = new WeakMap(), _YouTubeEmbed_controls = new WeakMap(), _YouTubeEmbed_lazy = new WeakMap(), _YouTubeEmbed_poster = new WeakMap(), _YouTubeEmbed_playing = new WeakMap(), _YouTubeEmbed_background = new WeakMap(), _YouTubeEmbed_playerVars = new WeakMap(), _YouTubeEmbed_instances = new WeakSet(), _YouTubeEmbed_reflectBooleanAttribute = function _YouTubeEmbed_reflectBooleanAttribute(name, value) {
+    this.updatingAttribute = true;
+    if (value) {
+        this.setAttribute(name, "");
+    }
+    else {
+        this.removeAttribute(name);
+    }
+    this.updatingAttribute = false;
+}, _YouTubeEmbed_updateBackgroundMode = function _YouTubeEmbed_updateBackgroundMode() {
+    if (__classPrivateFieldGet(this, _YouTubeEmbed_background, "f")) {
+        this.classList.add("is-background");
+        // Ensure properties for background mode are set
+        __classPrivateFieldSet(this, _YouTubeEmbed_autoplay, true, "f");
+        __classPrivateFieldSet(this, _YouTubeEmbed_muted, true, "f");
+        __classPrivateFieldSet(this, _YouTubeEmbed_controls, false, "f");
+        __classPrivateFieldSet(this, _YouTubeEmbed_lazy, false, "f"); // Background videos should load immediately
+    }
+    else {
+        this.classList.remove("is-background");
+    }
+};
+YouTubeEmbed.apiLoaded = false;
+YouTubeEmbed.apiReady = false;
+YouTubeEmbed.instanceCount = 0; // Track active instances
+YouTubeEmbed.DEBUG = false; // Enable/disable debug logging
+YouTubeEmbed.MAX_API_RETRIES = 3;
+YouTubeEmbed.API_RETRY_DELAY = 2000;
+YouTubeEmbed.API_LOAD_TIMEOUT = 10000;
+customElements.define("youtube-embed", YouTubeEmbed);
+// Component ready for testing
+//# sourceMappingURL=YouTubeEmbed.js.map