EmbedManager Documentation

Installation

You can include EmbedManager in your project in several ways:

Direct Download

<script src="path/to/embedManager.js"></script>

NPM

npm install embed-manager

Then import it in your project:

import 'embed-manager';

CDN

<script src="https://cdn.jsdelivr.net/gh/peterbenoit/EmbedManager@main/dist/embedManager.min.js"></script>

Basic Usage

Using EmbedManager is straightforward. Simply add an element with the embed-container class and appropriate data attributes:

<div class="embed-container"
     data-type="youtube"
     data-src="https://www.youtube.com/embed/OX1XxWOTiq8"
     data-title="YouTube Video">
</div>

The library will automatically:

  • Create the necessary iframe with proper attributes
  • Lazy load the content when the container comes into view
  • Handle responsive sizing and aspect ratio

Configuration

EmbedManager provides various options through data attributes:

Common Attributes

Attribute Description Default
data-type The type of embed (youtube, vimeo, twitch, etc.) Required
data-src The source URL or ID for the embed Required
data-title Title for the iframe (important for accessibility) "Untitled Embed"
data-width Width of the container "100%"
data-height Height of the container (if not using aspect ratio) Auto (based on aspect ratio)
data-aspect-ratio Aspect ratio of the embed "16/9"
data-autoplay Whether to autoplay the content when loaded "false"

See the specific service sections below for service-specific attributes.

YouTube

EmbedManager uses the privacy-enhanced version of YouTube embeds by default (youtube-nocookie.com).

Example

<div class="embed-container"
     data-type="youtube"
     data-src="https://www.youtube.com/embed/OX1XxWOTiq8"
     data-title="YouTube Video"
     data-autoplay="false">
</div>

YouTube-specific Attributes

EmbedManager automatically adds these parameters to YouTube embeds:

  • rel=0 - Prevents showing related videos from other channels
  • modestbranding=1 - Reduces YouTube branding on the player

API Reference

EmbedManager exposes a global instance that you can use to interact with embeds programmatically:

Methods

processContainer(element)

Manually processes a container element, creating the embed immediately:

// Get a container element
const container = document.querySelector('.my-embed');

// Process it immediately
window.EmbedManager.processContainer(container);

addEmbed(element)

Adds a new embed container to be observed and loaded when visible:

// Create a new container
const newContainer = document.createElement('div');
newContainer.className = 'embed-container';
newContainer.setAttribute('data-type', 'youtube');
newContainer.setAttribute('data-src', 'https://www.youtube.com/embed/OX1XxWOTiq8');
document.body.appendChild(newContainer);

// Add it to the observer
window.EmbedManager.addEmbed(newContainer);