Intersection Observer loading
Embeds can wait until they are near the viewport, reducing initial page weight and third-party requests.
01 · Why it exists
Embeds should not make every page pay upfront.
Third-party embeds are heavy, inconsistent, and usually eager. A page with a few videos, maps, pens, and posts can ship a lot of unused third-party code before a visitor reaches any of it.
EmbedManager turns those embeds into lightweight placeholders, then creates the real iframe or script only when the embed approaches the viewport or is explicitly requested.
Core behavior
One pattern for a pile of embed formats.
Privacy defaults
YouTube uses the privacy-enhanced host, and embeds can be represented by accessible placeholders before the provider code loads.
Dynamic embeds
Add markup at runtime, call the manager, and use the same data-type and
data-src interface.
02 · Quick start
CDN, npm, or plain data attributes.
<script src="https://cdn.jsdelivr.net/npm/embed-manager/dist/embedManager.min.js"></script>npm install embed-manager<div
class="embed"
data-type="youtube"
data-src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
data-title="Example video">
</div>
<script>new EmbedManager();</script>03 · Platform surface
The point is consistency across providers.
| Family | Supported examples |
|---|---|
| Video | YouTube, Vimeo, Twitch, TikTok, Instagram |
| Audio | Spotify and SoundCloud |
| Code | CodePen and GitHub Gists |
| Utility | Google Maps and generic website embeds |
Keep exploring