Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/heiseonline/embetty
🐙 Embetty displays remote content like tweets or YouTube videos without compromising your privacy.
https://github.com/heiseonline/embetty
embetty frontend javascript privacy
Last synced: 6 days ago
JSON representation
🐙 Embetty displays remote content like tweets or YouTube videos without compromising your privacy.
- Host: GitHub
- URL: https://github.com/heiseonline/embetty
- Owner: heiseonline
- License: mit
- Created: 2017-11-20T12:53:20.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-03-29T04:58:03.000Z (10 months ago)
- Last Synced: 2024-04-26T01:20:16.980Z (9 months ago)
- Topics: embetty, frontend, javascript, privacy
- Language: TypeScript
- Homepage:
- Size: 12 MB
- Stars: 972
- Watchers: 29
- Forks: 32
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-repos - heiseonline/embetty - 🐙 Embetty displays remote content like tweets or YouTube videos without compromising your privacy. (TypeScript)
- awesome-starred - heiseonline/embetty - 🐙 Embetty displays remote content like tweets or YouTube videos without compromising your privacy. (frontend)
README
# embetty
Embetty displays remote content like tweets or videos without compromising your privacy.
See it in action on our [demo pages](https://heiseonline.github.io/embetty/).
## Quick Start
1. Setup your [embetty-server](https://github.com/heiseonline/embetty-server).
2. Include the embetty lib into your HTML document.
3. Insert an embed by using a custom tag (see embeds section below).
Example:
```html
```
## Documentation
### Configure the Embetty server
Embetty needs a [server component](https://github.com/heiseonline/embetty-server) that you need to run on your infrastructure. Configure the server URL for embetty using a `` tag:
```html
```
### Including embetty.js
There are three options.
1. Download an Embetty archive from the [releases page](https://github.com/heiseonline/embetty/releases). Make `embetty.js` available on your site.
2. Use Embetty in your npm project: `yarn add @embetty/component` or `npm install @embetty/component --save`. Then import embetty into your main script (i.e. `import '@embetty/component'`).
3. Clone this repository and build `./dist/embetty.js`:
```sh
$ git clone https://github.com/heiseonline/embetty
$ cd embetty
$ yarn
$ yarn build
```
### Supported embed types
Currently, tweets and various video platforms are supported.
#### Tweet
Use the `status` attribute to embed a tweet with its tweet ID. Example:
```html
```
Use the `include-thread` attribute to include the thread _above_ the tweet (i.e. the conversation so far, for context). Example:
```html
```
#### Video
Use the `type` attribute with a value of `facebook`, `vimeo` or `youtube`. Set the `video-id` attribute to the video ID.
```html
```
Use the `poster-image` attribute with an URL. This overwrites the preview image of the video.
```html
```
For videos of type `vimeo` or `youtube`, it's also possible to set a `start-at` attribute with a value of time in seconds to start the video at a specific timecode.
```html
```
#### Mastodon Status
Use the `status` attribute with the link of the corresponding status. Embetty will retrieve the data from the corresponding Mastodon instance.
```html
```
### Events
Embetty triggers the following events:
| Name | Description |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| `initialized` | The Embetty embed will enter the viewport _after_ this has been triggered. |
| `activated` | The Embetty **video** embed has been replaced with an iframe containing the original video player. The content of the iframe may still be loading. |
Example code:
```js
document.querySelector('embetty-tweet').addEventListener('initialized', function(e) { ... })
```
## Testing
1. Clone this repository.
2. `yarn`
3. export the `TWITTER_` tokens mentioned in https://github.com/heiseonline/embetty-server
4. `yarn test`
## Caveats
The Embetty server component **does not proxy video data**. This means that **the tracking protection becomes ineffective after the play button has been clicked**.
## License
Embetty is [MIT licensed](./LICENSE).