Embetty displays remote content like tweets or videos without compromising your privacy.
See it in action on our demo pages.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta data-embetty-server="/path/to/embetty-server" />
<script async src="https://github.com/heiseonline/embetty/raw/master/embetty.js"></script>
</head>
<body>
<embetty-tweet status="1166685910030790662"></embetty-tweet>
</body>
</html>
Embetty needs a server component that you need to run on your infrastructure. Configure the server URL for embetty using a <meta data-embetty-server>
tag:
<head>
<meta data-embetty-server="/path/to/embetty-server" />
</head>
There are three options.
embetty.js
available on your site.yarn add @embetty/component
or npm install @embetty/component --save
. Then import embetty into your main script (i.e. import '@embetty/component'
)../dist/embetty.js
:
$ git clone https://github.com/heiseonline/embetty
$ cd embetty
$ yarn
$ yarn build
Currently, tweets and various video platforms are supported.
Use the status
attribute to embed a tweet with its tweet ID. Example:
<embetty-tweet status="950371792874557440"></embetty-tweet>
Use the include-thread
attribute to include the thread above the tweet (i.e. the conversation so far, for context). Example:
<embetty-tweet status="950371792874557440" include-thread></embetty-tweet>
Use the type
attribute with a value of facebook
, vimeo
or youtube
. Set the video-id
attribute to the video ID.
<embetty-video type="facebook" video-id="10156049485672318"></embetty-video>
Use the poster-image
attribute with an URL. This overwrites the preview image of the video.
<embetty-video
type="facebook"
video-id="10156049485672318"
poster-image="www.test.com/image.jpg"
></embetty-video>
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.
<embetty-video
type="youtube"
start-at="96"
video-id="3L4fHrIJ3A4"
></embetty-video>
<embetty-video type="vimeo" start-at="96" video-id="223099532"></embetty-video>
Use the status
attribute with the link of the corresponding status. Embetty will retrieve the data from the corresponding Mastodon instance.
<embetty-mastodon
status="https://social.heise.de/@heiseonline/110372412617177781"
></embetty-mastodon>
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:
document.querySelector('embetty-tweet').addEventListener('initialized', function(e) { ... })
yarn
TWITTER_
tokens mentioned in https://github.com/heiseonline/embetty-serveryarn test
The Embetty server component does not proxy video data. This means that the tracking protection becomes ineffective after the play button has been clicked.
Embetty is MIT licensed.