https://github.com/social-embed/social-embed
Utilities and web components for embeddable content (YouTube, Vimeo, Dailymotion)
https://github.com/social-embed/social-embed
custom-element lit o-embed typescript url-parser video webcomponent youtube youtube-embed
Last synced: 4 months ago
JSON representation
Utilities and web components for embeddable content (YouTube, Vimeo, Dailymotion)
- Host: GitHub
- URL: https://github.com/social-embed/social-embed
- Owner: social-embed
- License: mit
- Created: 2022-11-12T19:19:45.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-04-11T00:24:15.000Z (about 1 year ago)
- Last Synced: 2025-04-12T02:06:20.975Z (about 1 year ago)
- Topics: custom-element, lit, o-embed, typescript, url-parser, video, webcomponent, youtube, youtube-embed
- Language: TypeScript
- Homepage: https://social-embed.git-pull.com/
- Size: 8.65 MB
- Stars: 13
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
- License: LICENSE
Awesome Lists containing this project
README
# Social Embed
> A lightweight, browser-friendly toolkit for transforming media URLs into embeddable content.
[](https://www.npmjs.com/package/@social-embed/lib)
[](https://www.npmjs.com/package/@social-embed/wc)
[](LICENSE)
Easily convert URLs from popular platforms (YouTube, Spotify, Vimeo, etc.) into embeddable content with zero server-side dependencies. Available as a JavaScript library or a drop-in Web Component.
## Demo
[Try it on CodePen](https://codepen.io/attachment/pen/poRRwdy) | [Live Examples](https://social-embed.org/wc/)
```html
https://www.youtube.com/watch?v=Bd8_vO5zrjo
```
## Key Features
- **Zero dependencies** - Client-side parsing with no backend requirements
- **Multi-platform support** - YouTube, Spotify, Vimeo, DailyMotion, and more
- **Lightweight** - Small footprint for fast page loads
- **Framework-agnostic** - Works with any frontend technology
- **Simple API** - Easy to integrate with straightforward methods
## Quick Start
### Option 1: Web Component
```html
```
### Option 2: JavaScript Library
```bash
# Install the package
npm install @social-embed/lib
```
```javascript
// Convert a URL to its embed form
import { convertUrlToEmbedUrl } from "@social-embed/lib";
const embedUrl = convertUrlToEmbedUrl("https://youtu.be/Bd8_vO5zrjo");
// Output: "https://www.youtube.com/embed/Bd8_vO5zrjo"
```
## Supported Platforms
| Platform | URL Examples | Status |
|-------------|--------------------------------------------------|-------------|
| YouTube | youtube.com/watch?v=ID, youtu.be/ID | ✅ Stable |
| Spotify | open.spotify.com/track/ID, spotify:track:ID | ✅ Stable |
| Vimeo | vimeo.com/ID, vimeo.com/channels/staff/ID | ✅ Stable |
| DailyMotion | dailymotion.com/video/ID | ✅ Stable |
| Loom | loom.com/share/ID | ✅ Stable |
| EdPuzzle | edpuzzle.com/media/ID | ✅ Stable |
| Wistia | support.wistia.com/medias/ID | ✅ Stable |
For more details and examples for each platform, [see the documentation](https://social-embed.org/).
## Packages
| Package | Description | Status | Links |
|---------|-------------|--------|-------|
| **@social-embed/lib** | Core library for parsing and generating embed URLs | 🟡 API in development | [Documentation](https://social-embed.org/lib/) · [npm](https://www.npmjs.com/package/@social-embed/lib) |
| **@social-embed/wc** | Web Component for easy embedding in any HTML | ✅ Stable | [Documentation](https://social-embed.org/wc/) · [npm](https://www.npmjs.com/package/@social-embed/wc) |
## Use Cases
- **Content Management Systems** - Add embed functionality to user-generated content
- **Markdown Editors** - Enhance editors with automatic embeds
- **Social Platforms** - Turn shared links into rich embeds
- **Documentation Sites** - Embed media examples in tutorials
- **WYSIWYG Editors** - Integrate with HTML editors like CKEditor
## Browser Support
Works in all modern browsers that support Web Components.
## Projects
| Package | Source | Website | Status | Description |
| ----------- | --------------- | ------------------------------------------------------ | --------------- | ----------------------------------------- |
| Library | [packages/lib/] | https://social-embed.org/lib/ | 🟡 API unstable | Constants, regexes, id scraper, url maker |
| `` | [packages/wc/] | https://social-embed.org/wc/ | ✅ Stable | [custom element] / [web component] |
[packages/wc/]: packages/wc/
[packages/lib/]: packages/lib/
[custom element]: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
[web component]: https://developer.mozilla.org/en-US/docs/Web/Web_Components
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
MIT