embed-manager 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Peter Benoit
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,170 @@
+# EmbedManager
+
+A lightweight, dependency-free JavaScript library for embedding content from YouTube, Vimeo, Twitch, CodePen, TikTok, Spotify, SoundCloud, GitHub Gists, Google Maps, Twitter/X, and Instagram — with **lazy loading** via the Intersection Observer API.
+
+## Features
+
+- Lazy loads iframes only when they scroll into view
+- Supports 14+ embed types out of the box
+- Privacy-enhanced YouTube (`youtube-nocookie.com`) by default
+- Vimeo `dnt=1` (Do Not Track) by default
+- Sandboxed `<iframe>` for raw website embeds
+- Accessible (`aria-label`, `role="alert"`, `aria-live`)
+- Zero dependencies — pure vanilla JS (~8.6 KB minified)
+
+## CDN Usage
+
+### jsDelivr (recommended)
+
+```html
+<!-- Pinned to a specific version -->
+<script src="https://cdn.jsdelivr.net/npm/embed-manager@1.0.0/dist/embedManager.min.js"></script>
+
+<!-- Always latest -->
+<script src="https://cdn.jsdelivr.net/npm/embed-manager/dist/embedManager.min.js"></script>
+```
+
+### unpkg
+
+```html
+<!-- Pinned to a specific version -->
+<script src="https://unpkg.com/embed-manager@1.0.0/dist/embedManager.min.js"></script>
+
+<!-- Always latest -->
+<script src="https://unpkg.com/embed-manager/dist/embedManager.min.js"></script>
+```
+
+Loading the script auto-initializes `window.EmbedManager` and begins observing any `.embed-container` elements on the page.
+
+## npm
+
+```sh
+npm install embed-manager
+```
+
+```js
+const EmbedManager = require('embed-manager');
+const mgr = new EmbedManager({ rootMargin: '300px 0px' });
+```
+
+## Quick Start
+
+Add a container with `data-type` and `data-src`:
+
+```html
+<!-- YouTube -->
+<div class="embed-container"
+     data-type="youtube"
+     data-src="https://www.youtube.com/embed/dQw4w9WgXcQ"
+     data-title="Never Gonna Give You Up">
+</div>
+
+<!-- Vimeo with privacy hash -->
+<div class="embed-container"
+     data-type="vimeo"
+     data-src="https://player.vimeo.com/video/123456789"
+     data-hash="myPrivateHash"
+     data-title="My Vimeo Video">
+</div>
+
+<!-- CodePen -->
+<div class="embed-container"
+     data-type="codepen"
+     data-src="https://codepen.io/user/pen/abcdef"
+     data-default-tab="result"
+     data-title="My Pen">
+</div>
+
+<!-- Spotify track -->
+<div class="embed-container"
+     data-type="spotify"
+     data-src="https://open.spotify.com/track/abc123"
+     data-title="My Track"
+     data-aspect-ratio="unset"
+     data-height="152px">
+</div>
+```
+
+Then include EmbedManager via CDN (or npm) — no further setup needed.
+
+## Supported Types
+
+| `data-type` | Description |
+|-------------|-------------|
+| `youtube` | YouTube (auto-upgraded to `youtube-nocookie.com`) |
+| `vimeo` | Vimeo (supports `data-hash` for private videos) |
+| `twitch` | Twitch player/chat |
+| `codepen` | CodePen pens & embeds |
+| `spotify` | Spotify tracks, albums, playlists, episodes |
+| `soundcloud` | SoundCloud tracks |
+| `tiktok` | TikTok videos |
+| `twitter` / `x` | Tweets (via Twitter widget.js blockquote) |
+| `instagram` | Instagram posts & reels |
+| `gist` / `github` | GitHub Gists (via script embed) |
+| `maps` / `google-maps` | Google Maps embed |
+| `website` | Any URL (sandboxed iframe) |
+
+## Options
+
+```js
+new EmbedManager({
+  rootMargin: '200px 0px' // IntersectionObserver margin (default)
+});
+```
+
+## Data Attributes
+
+| Attribute | Default | Description |
+|-----------|---------|-------------|
+| `data-type` | — | Embed type (required) |
+| `data-src` | — | Source URL (required) |
+| `data-title` | `"Untitled Embed"` | iframe/aria title |
+| `data-width` | `100%` | Container width |
+| `data-height` | — | Explicit height (disables aspect-ratio) |
+| `data-aspect-ratio` | `16/9` | CSS aspect-ratio |
+| `data-autoplay` | — | Set `"true"` to autoplay (YouTube, Vimeo) |
+| `data-hash` | — | Vimeo privacy hash |
+| `data-app-id` | — | Vimeo app_id |
+| `data-theme-id` | — | CodePen theme ID |
+| `data-default-tab` | `result` | CodePen default tab |
+| `data-editable` | — | Set `"true"` for editable CodePen |
+| `data-preview` | — | Set `"true"` for CodePen preview mode |
+| `data-color` | `ff5500` | SoundCloud player color |
+| `data-show-comments` | — | Set `"true"` for SoundCloud comments |
+| `data-api-key` | — | Google Maps API key |
+| `data-lang` | `en` | Twitter embed language |
+| `data-theme` | `light` | Twitter embed theme |
+
+## API
+
+```js
+// Auto-initialized on page load as window.EmbedManager
+// Or create your own instance:
+const mgr = new EmbedManager();
+
+// Process a container immediately (bypasses IntersectionObserver)
+mgr.processContainer(document.querySelector('.embed-container'));
+
+// Add a dynamically created container to the lazy-load queue
+mgr.addEmbed(document.querySelector('.new-embed'));
+```
+
+## Release Steps
+
+```sh
+# 1. Bump version
+npm version patch   # or minor / major
+
+# 2. Preview what will be published
+npm run pack:check
+
+# 3. Publish (runs tests + build automatically via prepublishOnly)
+npm publish
+
+# 4. Push tag to GitHub
+git push origin main --tags
+```
+
+## License
+
+MIT © [Peter Benoit](https://github.com/peterbenoit)

package/dist/embedManager.js

@@ -0,0 +1,537 @@
+/**
+ * EmbedManager.js
+ *
+ * This library handles the embedding of various content types
+ * (YouTube, Vimeo, Twitch, CodePen, Twitter, Instragram and more) into a webpage with
+ * lazy loading to improve performance. It automatically injects the necessary
+ * CSS and sets up an Intersection Observer to load iframes only when they are
+ * in view, optimizing page load times and resource management.
+ *
+ * Features:
+ * - Lazy loading of iframes using the Intersection Observer API
+ * - Support for multiple content types (YouTube, Vimeo, Twitch, CodePen, Twitter, Instragram and more)
+ * - Sandbox attribute for website embeds to enhance security
+ * - Configurable iframe titles for accessibility
+ * - Handles Vimeo unlisted/private privacy hash via optional `data-hash` attribute
+ * - Enhanced accessibility with aria attributes
+ * - Improved security with referrer policy and stricter sandbox settings
+ * - Responsive design support with aspect ratio preservation
+ * - Error handling for failed embeds
+ *
+ * Usage:
+ * - Include the HTML structure with the 'embed-container' class and appropriate data attributes.
+ * - The class will handle iframe creation, and lazy loading automatically.
+ */
+class EmbedManager {
+	constructor(options = {}) {
+		this.options = {
+			rootMargin: '200px 0px',
+			...options
+		};
+		this.injectCSS();
+		this.init();
+	}
+
+	// Inject CSS into the document head
+	injectCSS() {
+		const style = document.createElement('style');
+		style.innerHTML = `
+			.embed-container {
+				margin: 20px auto;
+				background: #f4f4f4;
+				position: relative;
+				overflow: hidden;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				/* Default aspect ratio wrapper */
+				aspect-ratio: 16/9;
+			}
+			.embed-container iframe {
+				width: 100%;
+				height: 100%;
+				border: none;
+				display: block;
+				position: absolute;
+				top: 0;
+				left: 0;
+			}
+			.embed-container p {
+				margin: 0;
+				font-size: 1em;
+				color: #555;
+			}
+			.embed-container .embed-placeholder {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				width: 100%;
+				height: 100%;
+				text-align: center;
+				padding: 1rem;
+			}
+			.embed-container .embed-error {
+				color: #721c24;
+				background-color: #f8d7da;
+				padding: 0.75rem;
+				border-radius: 0.25rem;
+				margin: 0.5rem 0;
+				width: 100%;
+				text-align: center;
+			}
+		`;
+		document.head.appendChild(style);
+	}
+
+	// Initialize lazy loading after DOM is loaded
+	init() {
+		if (document.readyState === 'loading') {
+			document.addEventListener('DOMContentLoaded', () => this.setupEmbeds());
+		} else {
+			this.setupEmbeds();
+		}
+	}
+
+	setupEmbeds() {
+		const embeds = document.querySelectorAll('.embed-container');
+		this.setupObserver(embeds);
+	}
+
+	// Set up Intersection Observer for lazy loading
+	setupObserver(embeds) {
+		const observer = new IntersectionObserver((entries) => {
+			entries.forEach(entry => {
+				if (entry.isIntersecting) {
+					this.lazyLoadEmbed(entry.target);
+					observer.unobserve(entry.target); // Stop observing once loaded
+				}
+			});
+		}, {
+			rootMargin: this.options.rootMargin
+		});
+
+		// Observe each embed container
+		embeds.forEach(embed => {
+			// Add placeholder content
+			if (!embed.innerHTML.trim()) {
+				const type = embed.getAttribute('data-type') || 'content';
+				const placeholder = document.createElement('div');
+				placeholder.className = 'embed-placeholder';
+				placeholder.innerHTML = `<p>Loading ${type} content when visible</p>`;
+				embed.appendChild(placeholder);
+			}
+			observer.observe(embed);
+		});
+	}
+
+	// Helper method to show errors
+	showError(embed, message) {
+		console.error(`EmbedManager Error: ${message}`);
+		embed.innerHTML = `<div class="embed-error" role="alert">${message}</div>`;
+	}
+
+	// Validate URL format — only accepts https/http to prevent javascript: URI injection
+	isValidUrl(url) {
+		try {
+			const parsed = new URL(url);
+			return ['https:', 'http:'].includes(parsed.protocol);
+		} catch (e) {
+			return false;
+		}
+	}
+
+	// Build the embed source URL with appropriate parameters
+	buildEmbedSrc(embed, src, type) {
+		let finalSrc = src;
+
+		switch (type) {
+			case 'codepen': {
+				const themeId = embed.getAttribute('data-theme-id') || '';
+				const defaultTab = embed.getAttribute('data-default-tab') || 'result';
+				const editable = embed.getAttribute('data-editable') === 'true' ? 'true' : 'false';
+				const usePreview = embed.getAttribute('data-preview') === 'true';
+				// Convert /pen/ URL to embed URL and insert /preview/ when requested
+				if (finalSrc.includes('/pen/')) {
+					finalSrc = finalSrc.replace('/pen/', usePreview ? '/embed/preview/' : '/embed/');
+				} else if (usePreview && finalSrc.includes('/embed/') && !finalSrc.includes('/embed/preview/')) {
+					finalSrc = finalSrc.replace('/embed/', '/embed/preview/');
+				}
+				const cSep = finalSrc.includes('?') ? '&' : '?';
+				finalSrc = `${finalSrc}${cSep}theme-id=${themeId}&default-tab=${defaultTab}&editable=${editable}`;
+				break;
+			}
+
+			case 'vimeo': {
+				// Handle Vimeo privacy hash
+				const hash = embed.getAttribute('data-hash');
+				if (hash && !src.includes('h=')) {
+					const vSep = src.includes('?') ? '&' : '?';
+					finalSrc = `${src}${vSep}h=${hash}`;
+				}
+
+				// Add common Vimeo parameters
+				const vimeoParams = [
+					'badge=0',
+					'autopause=0',
+					'player_id=0',
+					'dnt=1' // Do Not Track for privacy
+				];
+
+				// Add app_id if provided
+				const appId = embed.getAttribute('data-app-id');
+				if (appId) {
+					vimeoParams.push(`app_id=${appId}`);
+				}
+
+				// Add user preferences
+				if (embed.getAttribute('data-autoplay') === 'true') {
+					vimeoParams.push('autoplay=1');
+				}
+
+				// Append all parameters
+				vimeoParams.forEach(param => {
+					const paramName = param.split('=')[0];
+					if (!finalSrc.includes(paramName + '=')) {
+						const sep = finalSrc.includes('?') ? '&' : '?';
+						finalSrc = `${finalSrc}${sep}${param}`;
+					}
+				});
+				break;
+			}
+
+			case 'youtube': {
+				// Add YouTube parameters for better privacy and user experience
+				const ytParams = [];
+
+				// Add user preferences
+				if (embed.getAttribute('data-autoplay') === 'true') {
+					ytParams.push('autoplay=1');
+				}
+
+				// Add privacy-enhanced mode
+				if (!src.includes('youtube-nocookie.com')) {
+					// Replace with privacy-enhanced version if not already using it
+					finalSrc = finalSrc.replace('youtube.com', 'youtube-nocookie.com');
+				}
+
+				// Add other common parameters
+				ytParams.push('rel=0', 'modestbranding=1');
+
+				// Append all parameters
+				const ytSep = finalSrc.includes('?') ? '&' : '?';
+				finalSrc = `${finalSrc}${ytSep}${ytParams.join('&')}`;
+				break;
+			}
+
+			case 'twitch': {
+				const parentDomain = window.location.hostname;
+				finalSrc = `${finalSrc}&parent=${parentDomain}`;
+				break;
+			}
+
+			case 'twitter':
+			case 'x':
+				// Twitter/X embeds need special handling with their widget.js
+				// We'll return the src as is, but we need to load their script
+				this.loadExternalScript('https://platform.twitter.com/widgets.js', 'twitter-widget');
+
+				// If the source is just a tweet ID, construct the proper URL
+				if (/^\d+$/.test(src)) {
+					finalSrc = `https://twitter.com/i/status/${src}`;
+				}
+				break;
+
+			case 'instagram':
+				// Instagram embeds require their script
+				this.loadExternalScript('https://www.instagram.com/embed.js', 'instagram-embed');
+
+				// Handle different Instagram URL formats
+				if (finalSrc.includes('instagram.com/p/') || finalSrc.includes('instagram.com/reel/')) {
+					// Add query parameters if not already present
+					if (!finalSrc.includes('?')) {
+						finalSrc = `${finalSrc}?utm_source=ig_embed&utm_campaign=loading`;
+					} else if (!finalSrc.includes('utm_source=ig_embed')) {
+						finalSrc = `${finalSrc}&utm_source=ig_embed&utm_campaign=loading`;
+					}
+				}
+				break;
+
+			case 'tiktok': {
+				// TikTok embeds require their script
+				this.loadExternalScript('https://www.tiktok.com/embed.js', 'tiktok-embed');
+
+				// Handle both video URLs and direct embed URLs
+				if (!finalSrc.includes('embed')) {
+					// Strip trailing slash and query string before extracting ID
+					const tiktokPath = finalSrc.replace(/\?.*$/, '').replace(/\/$/, '');
+					const tiktokId = tiktokPath.split('/').pop();
+					finalSrc = `https://www.tiktok.com/embed/v2/${tiktokId}`;
+				}
+				break;
+			}
+
+			case 'soundcloud': {
+				// If only the track URL is provided, convert to embed URL
+				if (!finalSrc.includes('api.soundcloud.com')) {
+					// We'll use color and auto_play from data attributes
+					const color = embed.getAttribute('data-color') || 'ff5500';
+					const autoPlay = embed.getAttribute('data-autoplay') === 'true' ? 'true' : 'false';
+					const showComments = embed.getAttribute('data-show-comments') === 'true' ? 'true' : 'false';
+
+					finalSrc = `https://w.soundcloud.com/player/?url=${encodeURIComponent(src)}&color=${color}&auto_play=${autoPlay}&hide_related=false&show_comments=${showComments}&show_user=true&show_reposts=false&show_teaser=true`;
+				}
+				break;
+			}
+
+			case 'spotify': {
+				// Handle different Spotify embed types (track, album, playlist, podcast)
+				if (finalSrc.includes('spotify.com')) {
+					// Convert regular Spotify URL to embed URL
+					const spotifyType = finalSrc.includes('/track/') ? 'track' :
+						finalSrc.includes('/album/') ? 'album' :
+							finalSrc.includes('/playlist/') ? 'playlist' :
+								finalSrc.includes('/episode/') ? 'episode' : 'track';
+
+					const spotifyId = finalSrc.split('/').pop().split('?')[0];
+					finalSrc = `https://open.spotify.com/embed/${spotifyType}/${spotifyId}`;
+				}
+				break;
+			}
+
+			case 'github':
+			case 'gist':
+				// GitHub Gists are embedded via script, not iframe
+				// Convert gist.github.com/user/gistid to the .js script URL
+				if (finalSrc.includes('gist.github.com') && !finalSrc.endsWith('.js')) {
+					const gistId = finalSrc.split('/').pop();
+					finalSrc = `https://gist.github.com/${gistId}.js`;
+				}
+				break;
+
+			case 'maps':
+			case 'google-maps': {
+				// Handle Google Maps embeds
+				if (!finalSrc.includes('google.com/maps/embed')) {
+					// If it's a regular maps URL, convert to embed URL
+					// Extract location query or coordinates
+					let query = '';
+
+					if (finalSrc.includes('maps/place/')) {
+						query = finalSrc.split('maps/place/')[1].split('/')[0];
+					} else if (finalSrc.includes('maps?q=')) {
+						query = finalSrc.split('maps?q=')[1].split('&')[0];
+					}
+
+					if (query) {
+						finalSrc = `https://www.google.com/maps/embed/v1/place?key=${embed.getAttribute('data-api-key') || ''}&q=${query}`;
+					}
+				}
+				break;
+			}
+		}
+
+		return finalSrc;
+	}
+
+	// Method to load external scripts needed for some embeds
+	loadExternalScript(src, id) {
+		if (!document.getElementById(id)) {
+			const script = document.createElement('script');
+			script.id = id;
+			script.src = src;
+			script.async = true;
+			script.defer = true;
+			document.body.appendChild(script);
+		}
+	}
+
+	// Override lazyLoadEmbed to handle special embed types
+	lazyLoadEmbed(embed) {
+		const type = embed.getAttribute('data-type');
+		const src = embed.getAttribute('data-src');
+
+		// Special handling for embeds that don't use iframes
+		if (type === 'twitter' || type === 'x' || type === 'gist' || type === 'github' || type === 'instagram') {
+			this.handleSpecialEmbed(embed, type);
+			return;
+		}
+
+		const title = embed.getAttribute('data-title') || 'Untitled Embed';
+		const width = embed.getAttribute('data-width') || '100%';
+		const height = embed.getAttribute('data-height');
+		const aspectRatio = embed.getAttribute('data-aspect-ratio') || '16/9';
+
+		// Validate source URL
+		if (!src || !this.isValidUrl(src)) {
+			this.showError(embed, 'Invalid embed source URL');
+			return;
+		}
+
+		// Set dimensions or aspect ratio
+		if (height) {
+			embed.style.height = height;
+			embed.style.width = width;
+			// Remove default aspect ratio if explicit dimensions are provided
+			embed.style.aspectRatio = 'unset';
+		} else {
+			embed.style.width = width;
+			embed.style.aspectRatio = aspectRatio;
+		}
+
+		// Show loading state for accessibility
+		const loadingMessage = document.createElement('div');
+		loadingMessage.className = 'embed-placeholder';
+		loadingMessage.setAttribute('aria-live', 'polite');
+		loadingMessage.innerHTML = `<p>Loading ${type} content...</p>`;
+		embed.innerHTML = '';
+		embed.appendChild(loadingMessage);
+
+		// Create iframe element with enhanced attributes
+		const iframe = document.createElement('iframe');
+		iframe.allow = 'autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media';
+		iframe.loading = 'lazy';
+		iframe.title = title;
+		iframe.setAttribute('allowfullscreen', '');
+		iframe.setAttribute('aria-label', title);
+		iframe.referrerPolicy = 'no-referrer-when-downgrade';
+
+		// Set source based on type
+		try {
+			let finalSrc = this.buildEmbedSrc(embed, src, type);
+			iframe.src = finalSrc;
+
+			// Handle load and error events
+			iframe.addEventListener('load', () => {
+				embed.querySelector('.embed-placeholder')?.remove();
+			});
+
+			iframe.addEventListener('error', () => {
+				this.showError(embed, `Failed to load ${type} content`);
+			});
+
+			// For website embeds, set enhanced sandbox attributes for security
+			if (type === 'website') {
+				iframe.sandbox = 'allow-scripts allow-same-origin allow-forms allow-popups';
+			}
+
+			// Replace placeholder with iframe
+			embed.appendChild(iframe);
+
+		} catch (error) {
+			this.showError(embed, error.message);
+		}
+	}
+
+	// Handle embeds that don't use traditional iframes
+	handleSpecialEmbed(embed, type) {
+		const src = embed.getAttribute('data-src');
+		const title = embed.getAttribute('data-title') || 'Untitled Embed';
+
+		// Show loading state
+		const loadingMessage = document.createElement('div');
+		loadingMessage.className = 'embed-placeholder';
+		loadingMessage.setAttribute('aria-live', 'polite');
+		loadingMessage.innerHTML = `<p>Loading ${type} content...</p>`;
+		embed.innerHTML = '';
+		embed.appendChild(loadingMessage);
+
+		try {
+			switch (type) {
+				case 'twitter':
+				case 'x':
+					// Create a blockquote for Twitter to transform
+					const tweetUrl = this.buildEmbedSrc(embed, src, type);
+					const tweetContainer = document.createElement('blockquote');
+					tweetContainer.className = 'twitter-tweet';
+					tweetContainer.setAttribute('data-lang', embed.getAttribute('data-lang') || 'en');
+					tweetContainer.setAttribute('data-theme', embed.getAttribute('data-theme') || 'light');
+
+					const tweetlink = document.createElement('a');
+					tweetlink.href = tweetUrl;
+					tweetlink.textContent = title;
+					tweetContainer.appendChild(tweetlink);
+
+					embed.innerHTML = '';
+					embed.appendChild(tweetContainer);
+
+					// Initialize Twitter widgets
+					if (window.twttr && window.twttr.widgets) {
+						window.twttr.widgets.load(embed);
+					} else {
+						// The script will auto-process when loaded
+						this.loadExternalScript('https://platform.twitter.com/widgets.js', 'twitter-widget');
+					}
+					break;
+
+				case 'instagram':
+					// Create an Instagram embed using blockquote format
+					const instagramUrl = this.buildEmbedSrc(embed, src, type);
+					const instagramContainer = document.createElement('blockquote');
+					instagramContainer.className = 'instagram-media';
+					instagramContainer.setAttribute('data-instgrm-captioned', '');
+					instagramContainer.setAttribute('data-instgrm-permalink', instagramUrl);
+					instagramContainer.setAttribute('data-instgrm-version', '14');
+					instagramContainer.style.margin = '0 auto';
+					instagramContainer.style.width = '100%';
+					instagramContainer.style.maxWidth = '540px';
+
+					// Add a link inside the blockquote (required for Instagram's script)
+					const link = document.createElement('a');
+					link.href = instagramUrl;
+					link.textContent = title || 'View this post on Instagram';
+					link.target = '_blank';
+					instagramContainer.appendChild(link);
+
+					embed.innerHTML = '';
+					embed.appendChild(instagramContainer);
+
+					// Load Instagram's embed script and process this container
+					this.loadExternalScript('https://www.instagram.com/embed.js', 'instagram-embed');
+
+					// Need to tell instgrm to process this embed
+					if (window.instgrm) {
+						window.instgrm.Embeds.process();
+					}
+					break;
+
+				case 'gist':
+				case 'github':
+					// GitHub Gists use script tags
+					const gistUrl = this.buildEmbedSrc(embed, src, type);
+					const gistScript = document.createElement('script');
+					gistScript.src = gistUrl;
+
+					embed.innerHTML = '';
+					embed.appendChild(gistScript);
+					break;
+			}
+		} catch (error) {
+			this.showError(embed, error.message);
+		}
+	}
+
+	// Process a single container immediately (for demo functionality)
+	processContainer(container) {
+		if (container && container.classList.contains('embed-container')) {
+			this.lazyLoadEmbed(container);
+		}
+	}
+
+	// Utility method to add new embeds dynamically after page load
+	addEmbed(container) {
+		if (container && container.classList.contains('embed-container')) {
+			this.setupObserver([container]);
+		}
+	}
+}
+
+// Export for module environments (testing, Node.js, bundlers)
+if (typeof module !== 'undefined' && module.exports) {
+	module.exports = EmbedManager;
+}
+
+// Auto-initialize for browser environments (non-module script tag usage)
+if (typeof window !== 'undefined' && typeof module === 'undefined') {
+	window.EmbedManager = new EmbedManager();
+}

package/dist/embedManager.min.js

@@ -0,0 +1 @@
+class EmbedManager{constructor(t={}){this.options={rootMargin:"200px 0px",...t},this.injectCSS(),this.init()}injectCSS(){const t=document.createElement("style");t.innerHTML="\n\t\t\t.embed-container {\n\t\t\t\tmargin: 20px auto;\n\t\t\t\tbackground: #f4f4f4;\n\t\t\t\tposition: relative;\n\t\t\t\toverflow: hidden;\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\talign-items: center;\n\t\t\t\t/* Default aspect ratio wrapper */\n\t\t\t\taspect-ratio: 16/9;\n\t\t\t}\n\t\t\t.embed-container iframe {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tborder: none;\n\t\t\t\tdisplay: block;\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t}\n\t\t\t.embed-container p {\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tcolor: #555;\n\t\t\t}\n\t\t\t.embed-container .embed-placeholder {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\ttext-align: center;\n\t\t\t\tpadding: 1rem;\n\t\t\t}\n\t\t\t.embed-container .embed-error {\n\t\t\t\tcolor: #721c24;\n\t\t\t\tbackground-color: #f8d7da;\n\t\t\t\tpadding: 0.75rem;\n\t\t\t\tborder-radius: 0.25rem;\n\t\t\t\tmargin: 0.5rem 0;\n\t\t\t\twidth: 100%;\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t",document.head.appendChild(t)}init(){"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>this.setupEmbeds()):this.setupEmbeds()}setupEmbeds(){const t=document.querySelectorAll(".embed-container");this.setupObserver(t)}setupObserver(t){const e=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting&&(this.lazyLoadEmbed(t.target),e.unobserve(t.target))})},{rootMargin:this.options.rootMargin});t.forEach(t=>{if(!t.innerHTML.trim()){const e=t.getAttribute("data-type")||"content",a=document.createElement("div");a.className="embed-placeholder",a.innerHTML=`<p>Loading ${e} content when visible</p>`,t.appendChild(a)}e.observe(t)})}showError(t,e){console.error(`EmbedManager Error: ${e}`),t.innerHTML=`<div class="embed-error" role="alert">${e}</div>`}isValidUrl(t){try{const e=new URL(t);return["https:","http:"].includes(e.protocol)}catch(t){return!1}}buildEmbedSrc(t,e,a){let i=e;switch(a){case"codepen":{const e=t.getAttribute("data-theme-id")||"",a=t.getAttribute("data-default-tab")||"result",n="true"===t.getAttribute("data-editable")?"true":"false",r="true"===t.getAttribute("data-preview");i.includes("/pen/")?i=i.replace("/pen/",r?"/embed/preview/":"/embed/"):r&&i.includes("/embed/")&&!i.includes("/embed/preview/")&&(i=i.replace("/embed/","/embed/preview/"));const s=i.includes("?")?"&":"?";i=`${i}${s}theme-id=${e}&default-tab=${a}&editable=${n}`;break}case"vimeo":{const a=t.getAttribute("data-hash");if(a&&!e.includes("h=")){const t=e.includes("?")?"&":"?";i=`${e}${t}h=${a}`}const n=["badge=0","autopause=0","player_id=0","dnt=1"],r=t.getAttribute("data-app-id");r&&n.push(`app_id=${r}`),"true"===t.getAttribute("data-autoplay")&&n.push("autoplay=1"),n.forEach(t=>{const e=t.split("=")[0];if(!i.includes(e+"=")){const e=i.includes("?")?"&":"?";i=`${i}${e}${t}`}});break}case"youtube":{const a=[];"true"===t.getAttribute("data-autoplay")&&a.push("autoplay=1"),e.includes("youtube-nocookie.com")||(i=i.replace("youtube.com","youtube-nocookie.com")),a.push("rel=0","modestbranding=1");const n=i.includes("?")?"&":"?";i=`${i}${n}${a.join("&")}`;break}case"twitch":{const t=window.location.hostname;i=`${i}&parent=${t}`;break}case"twitter":case"x":this.loadExternalScript("https://platform.twitter.com/widgets.js","twitter-widget"),/^\d+$/.test(e)&&(i=`https://twitter.com/i/status/${e}`);break;case"instagram":this.loadExternalScript("https://www.instagram.com/embed.js","instagram-embed"),(i.includes("instagram.com/p/")||i.includes("instagram.com/reel/"))&&(i.includes("?")?i.includes("utm_source=ig_embed")||(i=`${i}&utm_source=ig_embed&utm_campaign=loading`):i=`${i}?utm_source=ig_embed&utm_campaign=loading`);break;case"tiktok":if(this.loadExternalScript("https://www.tiktok.com/embed.js","tiktok-embed"),!i.includes("embed")){const t=i.replace(/\?.*$/,"").replace(/\/$/,"").split("/").pop();i=`https://www.tiktok.com/embed/v2/${t}`}break;case"soundcloud":if(!i.includes("api.soundcloud.com")){const a=t.getAttribute("data-color")||"ff5500",n="true"===t.getAttribute("data-autoplay")?"true":"false",r="true"===t.getAttribute("data-show-comments")?"true":"false";i=`https://w.soundcloud.com/player/?url=${encodeURIComponent(e)}&color=${a}&auto_play=${n}&hide_related=false&show_comments=${r}&show_user=true&show_reposts=false&show_teaser=true`}break;case"spotify":if(i.includes("spotify.com")){const t=i.includes("/track/")?"track":i.includes("/album/")?"album":i.includes("/playlist/")?"playlist":i.includes("/episode/")?"episode":"track",e=i.split("/").pop().split("?")[0];i=`https://open.spotify.com/embed/${t}/${e}`}break;case"github":case"gist":if(i.includes("gist.github.com")&&!i.endsWith(".js")){const t=i.split("/").pop();i=`https://gist.github.com/${t}.js`}break;case"maps":case"google-maps":if(!i.includes("google.com/maps/embed")){let e="";i.includes("maps/place/")?e=i.split("maps/place/")[1].split("/")[0]:i.includes("maps?q=")&&(e=i.split("maps?q=")[1].split("&")[0]),e&&(i=`https://www.google.com/maps/embed/v1/place?key=${t.getAttribute("data-api-key")||""}&q=${e}`)}}return i}loadExternalScript(t,e){if(!document.getElementById(e)){const a=document.createElement("script");a.id=e,a.src=t,a.async=!0,a.defer=!0,document.body.appendChild(a)}}lazyLoadEmbed(t){const e=t.getAttribute("data-type"),a=t.getAttribute("data-src");if("twitter"===e||"x"===e||"gist"===e||"github"===e||"instagram"===e)return void this.handleSpecialEmbed(t,e);const i=t.getAttribute("data-title")||"Untitled Embed",n=t.getAttribute("data-width")||"100%",r=t.getAttribute("data-height"),s=t.getAttribute("data-aspect-ratio")||"16/9";if(!a||!this.isValidUrl(a))return void this.showError(t,"Invalid embed source URL");r?(t.style.height=r,t.style.width=n,t.style.aspectRatio="unset"):(t.style.width=n,t.style.aspectRatio=s);const o=document.createElement("div");o.className="embed-placeholder",o.setAttribute("aria-live","polite"),o.innerHTML=`<p>Loading ${e} content...</p>`,t.innerHTML="",t.appendChild(o);const d=document.createElement("iframe");d.allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media",d.loading="lazy",d.title=i,d.setAttribute("allowfullscreen",""),d.setAttribute("aria-label",i),d.referrerPolicy="no-referrer-when-downgrade";try{let i=this.buildEmbedSrc(t,a,e);d.src=i,d.addEventListener("load",()=>{t.querySelector(".embed-placeholder")?.remove()}),d.addEventListener("error",()=>{this.showError(t,`Failed to load ${e} content`)}),"website"===e&&(d.sandbox="allow-scripts allow-same-origin allow-forms allow-popups"),t.appendChild(d)}catch(e){this.showError(t,e.message)}}handleSpecialEmbed(t,e){const a=t.getAttribute("data-src"),i=t.getAttribute("data-title")||"Untitled Embed",n=document.createElement("div");n.className="embed-placeholder",n.setAttribute("aria-live","polite"),n.innerHTML=`<p>Loading ${e} content...</p>`,t.innerHTML="",t.appendChild(n);try{switch(e){case"twitter":case"x":const n=this.buildEmbedSrc(t,a,e),r=document.createElement("blockquote");r.className="twitter-tweet",r.setAttribute("data-lang",t.getAttribute("data-lang")||"en"),r.setAttribute("data-theme",t.getAttribute("data-theme")||"light");const s=document.createElement("a");s.href=n,s.textContent=i,r.appendChild(s),t.innerHTML="",t.appendChild(r),window.twttr&&window.twttr.widgets?window.twttr.widgets.load(t):this.loadExternalScript("https://platform.twitter.com/widgets.js","twitter-widget");break;case"instagram":const o=this.buildEmbedSrc(t,a,e),d=document.createElement("blockquote");d.className="instagram-media",d.setAttribute("data-instgrm-captioned",""),d.setAttribute("data-instgrm-permalink",o),d.setAttribute("data-instgrm-version","14"),d.style.margin="0 auto",d.style.width="100%",d.style.maxWidth="540px";const c=document.createElement("a");c.href=o,c.textContent=i||"View this post on Instagram",c.target="_blank",d.appendChild(c),t.innerHTML="",t.appendChild(d),this.loadExternalScript("https://www.instagram.com/embed.js","instagram-embed"),window.instgrm&&window.instgrm.Embeds.process();break;case"gist":case"github":const l=this.buildEmbedSrc(t,a,e),m=document.createElement("script");m.src=l,t.innerHTML="",t.appendChild(m)}}catch(e){this.showError(t,e.message)}}processContainer(t){t&&t.classList.contains("embed-container")&&this.lazyLoadEmbed(t)}addEmbed(t){t&&t.classList.contains("embed-container")&&this.setupObserver([t])}}"undefined"!=typeof module&&module.exports&&(module.exports=EmbedManager),"undefined"!=typeof window&&"undefined"==typeof module&&(window.EmbedManager=new EmbedManager);

package/package.json

@@ -0,0 +1,70 @@
+{
+	"name": "embed-manager",
+	"version": "1.0.0",
+	"description": "A versatile JavaScript library for embedding various content types (YouTube, Vimeo, Twitch, CodePen, and websites) with lazy loading capabilities",
+	"main": "src/lib/embedManager.js",
+	"browser": "dist/embedManager.min.js",
+	"jsdelivr": "dist/embedManager.min.js",
+	"unpkg": "dist/embedManager.min.js",
+	"exports": {
+		".": {
+			"browser": "./dist/embedManager.min.js",
+			"default": "./src/lib/embedManager.js"
+		}
+	},
+	"files": [
+		"src/lib/embedManager.js",
+		"dist/embedManager.js",
+		"dist/embedManager.min.js",
+		"README.md",
+		"LICENSE"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/peterbenoit/EmbedManager.git"
+	},
+	"keywords": [
+		"embed",
+		"iframe",
+		"lazy-loading",
+		"youtube",
+		"vimeo",
+		"twitch",
+		"codepen",
+		"tiktok",
+		"spotify",
+		"soundcloud",
+		"website-embed"
+	],
+	"author": "Peter Benoit",
+	"license": "MIT",
+	"scripts": {
+		"build": "mkdir -p dist && cp src/lib/embedManager.js dist/embedManager.js && terser src/lib/embedManager.js --compress --mangle --output dist/embedManager.min.js",
+		"test": "jest",
+		"test:watch": "jest --watch",
+		"test:coverage": "jest --coverage",
+		"pack:check": "npm pack --dry-run",
+		"prepublishOnly": "npm test && npm run build"
+	},
+	"jest": {
+		"testEnvironment": "jsdom",
+		"testMatch": [
+			"**/*.test.js"
+		],
+		"coverageDirectory": "coverage",
+		"collectCoverageFrom": [
+			"src/lib/**/*.js"
+		]
+	},
+	"bugs": {
+		"url": "https://github.com/peterbenoit/EmbedManager/issues"
+	},
+	"homepage": "https://github.com/peterbenoit/EmbedManager#readme",
+	"devDependencies": {
+		"fs-extra": "^11.1.0",
+		"http-server": "^14.1.1",
+		"jest": "^30.3.0",
+		"jest-environment-jsdom": "^30.3.0",
+		"terser": "^5.17.1"
+	}
+}

package/src/lib/embedManager.js

@@ -0,0 +1,537 @@
+/**
+ * EmbedManager.js
+ *
+ * This library handles the embedding of various content types
+ * (YouTube, Vimeo, Twitch, CodePen, Twitter, Instragram and more) into a webpage with
+ * lazy loading to improve performance. It automatically injects the necessary
+ * CSS and sets up an Intersection Observer to load iframes only when they are
+ * in view, optimizing page load times and resource management.
+ *
+ * Features:
+ * - Lazy loading of iframes using the Intersection Observer API
+ * - Support for multiple content types (YouTube, Vimeo, Twitch, CodePen, Twitter, Instragram and more)
+ * - Sandbox attribute for website embeds to enhance security
+ * - Configurable iframe titles for accessibility
+ * - Handles Vimeo unlisted/private privacy hash via optional `data-hash` attribute
+ * - Enhanced accessibility with aria attributes
+ * - Improved security with referrer policy and stricter sandbox settings
+ * - Responsive design support with aspect ratio preservation
+ * - Error handling for failed embeds
+ *
+ * Usage:
+ * - Include the HTML structure with the 'embed-container' class and appropriate data attributes.
+ * - The class will handle iframe creation, and lazy loading automatically.
+ */
+class EmbedManager {
+	constructor(options = {}) {
+		this.options = {
+			rootMargin: '200px 0px',
+			...options
+		};
+		this.injectCSS();
+		this.init();
+	}
+
+	// Inject CSS into the document head
+	injectCSS() {
+		const style = document.createElement('style');
+		style.innerHTML = `
+			.embed-container {
+				margin: 20px auto;
+				background: #f4f4f4;
+				position: relative;
+				overflow: hidden;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				/* Default aspect ratio wrapper */
+				aspect-ratio: 16/9;
+			}
+			.embed-container iframe {
+				width: 100%;
+				height: 100%;
+				border: none;
+				display: block;
+				position: absolute;
+				top: 0;
+				left: 0;
+			}
+			.embed-container p {
+				margin: 0;
+				font-size: 1em;
+				color: #555;
+			}
+			.embed-container .embed-placeholder {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				width: 100%;
+				height: 100%;
+				text-align: center;
+				padding: 1rem;
+			}
+			.embed-container .embed-error {
+				color: #721c24;
+				background-color: #f8d7da;
+				padding: 0.75rem;
+				border-radius: 0.25rem;
+				margin: 0.5rem 0;
+				width: 100%;
+				text-align: center;
+			}
+		`;
+		document.head.appendChild(style);
+	}
+
+	// Initialize lazy loading after DOM is loaded
+	init() {
+		if (document.readyState === 'loading') {
+			document.addEventListener('DOMContentLoaded', () => this.setupEmbeds());
+		} else {
+			this.setupEmbeds();
+		}
+	}
+
+	setupEmbeds() {
+		const embeds = document.querySelectorAll('.embed-container');
+		this.setupObserver(embeds);
+	}
+
+	// Set up Intersection Observer for lazy loading
+	setupObserver(embeds) {
+		const observer = new IntersectionObserver((entries) => {
+			entries.forEach(entry => {
+				if (entry.isIntersecting) {
+					this.lazyLoadEmbed(entry.target);
+					observer.unobserve(entry.target); // Stop observing once loaded
+				}
+			});
+		}, {
+			rootMargin: this.options.rootMargin
+		});
+
+		// Observe each embed container
+		embeds.forEach(embed => {
+			// Add placeholder content
+			if (!embed.innerHTML.trim()) {
+				const type = embed.getAttribute('data-type') || 'content';
+				const placeholder = document.createElement('div');
+				placeholder.className = 'embed-placeholder';
+				placeholder.innerHTML = `<p>Loading ${type} content when visible</p>`;
+				embed.appendChild(placeholder);
+			}
+			observer.observe(embed);
+		});
+	}
+
+	// Helper method to show errors
+	showError(embed, message) {
+		console.error(`EmbedManager Error: ${message}`);
+		embed.innerHTML = `<div class="embed-error" role="alert">${message}</div>`;
+	}
+
+	// Validate URL format — only accepts https/http to prevent javascript: URI injection
+	isValidUrl(url) {
+		try {
+			const parsed = new URL(url);
+			return ['https:', 'http:'].includes(parsed.protocol);
+		} catch (e) {
+			return false;
+		}
+	}
+
+	// Build the embed source URL with appropriate parameters
+	buildEmbedSrc(embed, src, type) {
+		let finalSrc = src;
+
+		switch (type) {
+			case 'codepen': {
+				const themeId = embed.getAttribute('data-theme-id') || '';
+				const defaultTab = embed.getAttribute('data-default-tab') || 'result';
+				const editable = embed.getAttribute('data-editable') === 'true' ? 'true' : 'false';
+				const usePreview = embed.getAttribute('data-preview') === 'true';
+				// Convert /pen/ URL to embed URL and insert /preview/ when requested
+				if (finalSrc.includes('/pen/')) {
+					finalSrc = finalSrc.replace('/pen/', usePreview ? '/embed/preview/' : '/embed/');
+				} else if (usePreview && finalSrc.includes('/embed/') && !finalSrc.includes('/embed/preview/')) {
+					finalSrc = finalSrc.replace('/embed/', '/embed/preview/');
+				}
+				const cSep = finalSrc.includes('?') ? '&' : '?';
+				finalSrc = `${finalSrc}${cSep}theme-id=${themeId}&default-tab=${defaultTab}&editable=${editable}`;
+				break;
+			}
+
+			case 'vimeo': {
+				// Handle Vimeo privacy hash
+				const hash = embed.getAttribute('data-hash');
+				if (hash && !src.includes('h=')) {
+					const vSep = src.includes('?') ? '&' : '?';
+					finalSrc = `${src}${vSep}h=${hash}`;
+				}
+
+				// Add common Vimeo parameters
+				const vimeoParams = [
+					'badge=0',
+					'autopause=0',
+					'player_id=0',
+					'dnt=1' // Do Not Track for privacy
+				];
+
+				// Add app_id if provided
+				const appId = embed.getAttribute('data-app-id');
+				if (appId) {
+					vimeoParams.push(`app_id=${appId}`);
+				}
+
+				// Add user preferences
+				if (embed.getAttribute('data-autoplay') === 'true') {
+					vimeoParams.push('autoplay=1');
+				}
+
+				// Append all parameters
+				vimeoParams.forEach(param => {
+					const paramName = param.split('=')[0];
+					if (!finalSrc.includes(paramName + '=')) {
+						const sep = finalSrc.includes('?') ? '&' : '?';
+						finalSrc = `${finalSrc}${sep}${param}`;
+					}
+				});
+				break;
+			}
+
+			case 'youtube': {
+				// Add YouTube parameters for better privacy and user experience
+				const ytParams = [];
+
+				// Add user preferences
+				if (embed.getAttribute('data-autoplay') === 'true') {
+					ytParams.push('autoplay=1');
+				}
+
+				// Add privacy-enhanced mode
+				if (!src.includes('youtube-nocookie.com')) {
+					// Replace with privacy-enhanced version if not already using it
+					finalSrc = finalSrc.replace('youtube.com', 'youtube-nocookie.com');
+				}
+
+				// Add other common parameters
+				ytParams.push('rel=0', 'modestbranding=1');
+
+				// Append all parameters
+				const ytSep = finalSrc.includes('?') ? '&' : '?';
+				finalSrc = `${finalSrc}${ytSep}${ytParams.join('&')}`;
+				break;
+			}
+
+			case 'twitch': {
+				const parentDomain = window.location.hostname;
+				finalSrc = `${finalSrc}&parent=${parentDomain}`;
+				break;
+			}
+
+			case 'twitter':
+			case 'x':
+				// Twitter/X embeds need special handling with their widget.js
+				// We'll return the src as is, but we need to load their script
+				this.loadExternalScript('https://platform.twitter.com/widgets.js', 'twitter-widget');
+
+				// If the source is just a tweet ID, construct the proper URL
+				if (/^\d+$/.test(src)) {
+					finalSrc = `https://twitter.com/i/status/${src}`;
+				}
+				break;
+
+			case 'instagram':
+				// Instagram embeds require their script
+				this.loadExternalScript('https://www.instagram.com/embed.js', 'instagram-embed');
+
+				// Handle different Instagram URL formats
+				if (finalSrc.includes('instagram.com/p/') || finalSrc.includes('instagram.com/reel/')) {
+					// Add query parameters if not already present
+					if (!finalSrc.includes('?')) {
+						finalSrc = `${finalSrc}?utm_source=ig_embed&utm_campaign=loading`;
+					} else if (!finalSrc.includes('utm_source=ig_embed')) {
+						finalSrc = `${finalSrc}&utm_source=ig_embed&utm_campaign=loading`;
+					}
+				}
+				break;
+
+			case 'tiktok': {
+				// TikTok embeds require their script
+				this.loadExternalScript('https://www.tiktok.com/embed.js', 'tiktok-embed');
+
+				// Handle both video URLs and direct embed URLs
+				if (!finalSrc.includes('embed')) {
+					// Strip trailing slash and query string before extracting ID
+					const tiktokPath = finalSrc.replace(/\?.*$/, '').replace(/\/$/, '');
+					const tiktokId = tiktokPath.split('/').pop();
+					finalSrc = `https://www.tiktok.com/embed/v2/${tiktokId}`;
+				}
+				break;
+			}
+
+			case 'soundcloud': {
+				// If only the track URL is provided, convert to embed URL
+				if (!finalSrc.includes('api.soundcloud.com')) {
+					// We'll use color and auto_play from data attributes
+					const color = embed.getAttribute('data-color') || 'ff5500';
+					const autoPlay = embed.getAttribute('data-autoplay') === 'true' ? 'true' : 'false';
+					const showComments = embed.getAttribute('data-show-comments') === 'true' ? 'true' : 'false';
+
+					finalSrc = `https://w.soundcloud.com/player/?url=${encodeURIComponent(src)}&color=${color}&auto_play=${autoPlay}&hide_related=false&show_comments=${showComments}&show_user=true&show_reposts=false&show_teaser=true`;
+				}
+				break;
+			}
+
+			case 'spotify': {
+				// Handle different Spotify embed types (track, album, playlist, podcast)
+				if (finalSrc.includes('spotify.com')) {
+					// Convert regular Spotify URL to embed URL
+					const spotifyType = finalSrc.includes('/track/') ? 'track' :
+						finalSrc.includes('/album/') ? 'album' :
+							finalSrc.includes('/playlist/') ? 'playlist' :
+								finalSrc.includes('/episode/') ? 'episode' : 'track';
+
+					const spotifyId = finalSrc.split('/').pop().split('?')[0];
+					finalSrc = `https://open.spotify.com/embed/${spotifyType}/${spotifyId}`;
+				}
+				break;
+			}
+
+			case 'github':
+			case 'gist':
+				// GitHub Gists are embedded via script, not iframe
+				// Convert gist.github.com/user/gistid to the .js script URL
+				if (finalSrc.includes('gist.github.com') && !finalSrc.endsWith('.js')) {
+					const gistId = finalSrc.split('/').pop();
+					finalSrc = `https://gist.github.com/${gistId}.js`;
+				}
+				break;
+
+			case 'maps':
+			case 'google-maps': {
+				// Handle Google Maps embeds
+				if (!finalSrc.includes('google.com/maps/embed')) {
+					// If it's a regular maps URL, convert to embed URL
+					// Extract location query or coordinates
+					let query = '';
+
+					if (finalSrc.includes('maps/place/')) {
+						query = finalSrc.split('maps/place/')[1].split('/')[0];
+					} else if (finalSrc.includes('maps?q=')) {
+						query = finalSrc.split('maps?q=')[1].split('&')[0];
+					}
+
+					if (query) {
+						finalSrc = `https://www.google.com/maps/embed/v1/place?key=${embed.getAttribute('data-api-key') || ''}&q=${query}`;
+					}
+				}
+				break;
+			}
+		}
+
+		return finalSrc;
+	}
+
+	// Method to load external scripts needed for some embeds
+	loadExternalScript(src, id) {
+		if (!document.getElementById(id)) {
+			const script = document.createElement('script');
+			script.id = id;
+			script.src = src;
+			script.async = true;
+			script.defer = true;
+			document.body.appendChild(script);
+		}
+	}
+
+	// Override lazyLoadEmbed to handle special embed types
+	lazyLoadEmbed(embed) {
+		const type = embed.getAttribute('data-type');
+		const src = embed.getAttribute('data-src');
+
+		// Special handling for embeds that don't use iframes
+		if (type === 'twitter' || type === 'x' || type === 'gist' || type === 'github' || type === 'instagram') {
+			this.handleSpecialEmbed(embed, type);
+			return;
+		}
+
+		const title = embed.getAttribute('data-title') || 'Untitled Embed';
+		const width = embed.getAttribute('data-width') || '100%';
+		const height = embed.getAttribute('data-height');
+		const aspectRatio = embed.getAttribute('data-aspect-ratio') || '16/9';
+
+		// Validate source URL
+		if (!src || !this.isValidUrl(src)) {
+			this.showError(embed, 'Invalid embed source URL');
+			return;
+		}
+
+		// Set dimensions or aspect ratio
+		if (height) {
+			embed.style.height = height;
+			embed.style.width = width;
+			// Remove default aspect ratio if explicit dimensions are provided
+			embed.style.aspectRatio = 'unset';
+		} else {
+			embed.style.width = width;
+			embed.style.aspectRatio = aspectRatio;
+		}
+
+		// Show loading state for accessibility
+		const loadingMessage = document.createElement('div');
+		loadingMessage.className = 'embed-placeholder';
+		loadingMessage.setAttribute('aria-live', 'polite');
+		loadingMessage.innerHTML = `<p>Loading ${type} content...</p>`;
+		embed.innerHTML = '';
+		embed.appendChild(loadingMessage);
+
+		// Create iframe element with enhanced attributes
+		const iframe = document.createElement('iframe');
+		iframe.allow = 'autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media';
+		iframe.loading = 'lazy';
+		iframe.title = title;
+		iframe.setAttribute('allowfullscreen', '');
+		iframe.setAttribute('aria-label', title);
+		iframe.referrerPolicy = 'no-referrer-when-downgrade';
+
+		// Set source based on type
+		try {
+			let finalSrc = this.buildEmbedSrc(embed, src, type);
+			iframe.src = finalSrc;
+
+			// Handle load and error events
+			iframe.addEventListener('load', () => {
+				embed.querySelector('.embed-placeholder')?.remove();
+			});
+
+			iframe.addEventListener('error', () => {
+				this.showError(embed, `Failed to load ${type} content`);
+			});
+
+			// For website embeds, set enhanced sandbox attributes for security
+			if (type === 'website') {
+				iframe.sandbox = 'allow-scripts allow-same-origin allow-forms allow-popups';
+			}
+
+			// Replace placeholder with iframe
+			embed.appendChild(iframe);
+
+		} catch (error) {
+			this.showError(embed, error.message);
+		}
+	}
+
+	// Handle embeds that don't use traditional iframes
+	handleSpecialEmbed(embed, type) {
+		const src = embed.getAttribute('data-src');
+		const title = embed.getAttribute('data-title') || 'Untitled Embed';
+
+		// Show loading state
+		const loadingMessage = document.createElement('div');
+		loadingMessage.className = 'embed-placeholder';
+		loadingMessage.setAttribute('aria-live', 'polite');
+		loadingMessage.innerHTML = `<p>Loading ${type} content...</p>`;
+		embed.innerHTML = '';
+		embed.appendChild(loadingMessage);
+
+		try {
+			switch (type) {
+				case 'twitter':
+				case 'x':
+					// Create a blockquote for Twitter to transform
+					const tweetUrl = this.buildEmbedSrc(embed, src, type);
+					const tweetContainer = document.createElement('blockquote');
+					tweetContainer.className = 'twitter-tweet';
+					tweetContainer.setAttribute('data-lang', embed.getAttribute('data-lang') || 'en');
+					tweetContainer.setAttribute('data-theme', embed.getAttribute('data-theme') || 'light');
+
+					const tweetlink = document.createElement('a');
+					tweetlink.href = tweetUrl;
+					tweetlink.textContent = title;
+					tweetContainer.appendChild(tweetlink);
+
+					embed.innerHTML = '';
+					embed.appendChild(tweetContainer);
+
+					// Initialize Twitter widgets
+					if (window.twttr && window.twttr.widgets) {
+						window.twttr.widgets.load(embed);
+					} else {
+						// The script will auto-process when loaded
+						this.loadExternalScript('https://platform.twitter.com/widgets.js', 'twitter-widget');
+					}
+					break;
+
+				case 'instagram':
+					// Create an Instagram embed using blockquote format
+					const instagramUrl = this.buildEmbedSrc(embed, src, type);
+					const instagramContainer = document.createElement('blockquote');
+					instagramContainer.className = 'instagram-media';
+					instagramContainer.setAttribute('data-instgrm-captioned', '');
+					instagramContainer.setAttribute('data-instgrm-permalink', instagramUrl);
+					instagramContainer.setAttribute('data-instgrm-version', '14');
+					instagramContainer.style.margin = '0 auto';
+					instagramContainer.style.width = '100%';
+					instagramContainer.style.maxWidth = '540px';
+
+					// Add a link inside the blockquote (required for Instagram's script)
+					const link = document.createElement('a');
+					link.href = instagramUrl;
+					link.textContent = title || 'View this post on Instagram';
+					link.target = '_blank';
+					instagramContainer.appendChild(link);
+
+					embed.innerHTML = '';
+					embed.appendChild(instagramContainer);
+
+					// Load Instagram's embed script and process this container
+					this.loadExternalScript('https://www.instagram.com/embed.js', 'instagram-embed');
+
+					// Need to tell instgrm to process this embed
+					if (window.instgrm) {
+						window.instgrm.Embeds.process();
+					}
+					break;
+
+				case 'gist':
+				case 'github':
+					// GitHub Gists use script tags
+					const gistUrl = this.buildEmbedSrc(embed, src, type);
+					const gistScript = document.createElement('script');
+					gistScript.src = gistUrl;
+
+					embed.innerHTML = '';
+					embed.appendChild(gistScript);
+					break;
+			}
+		} catch (error) {
+			this.showError(embed, error.message);
+		}
+	}
+
+	// Process a single container immediately (for demo functionality)
+	processContainer(container) {
+		if (container && container.classList.contains('embed-container')) {
+			this.lazyLoadEmbed(container);
+		}
+	}
+
+	// Utility method to add new embeds dynamically after page load
+	addEmbed(container) {
+		if (container && container.classList.contains('embed-container')) {
+			this.setupObserver([container]);
+		}
+	}
+}
+
+// Export for module environments (testing, Node.js, bundlers)
+if (typeof module !== 'undefined' && module.exports) {
+	module.exports = EmbedManager;
+}
+
+// Auto-initialize for browser environments (non-module script tag usage)
+if (typeof window !== 'undefined' && typeof module === 'undefined') {
+	window.EmbedManager = new EmbedManager();
+}