Embetty displays remote content like tweets or videos without compromising your privacy.
See it in action on our demo pages.
- Setup your embetty-server.
- Include the embetty lib into your HTML document.
- Insert an embed by using a custom tag (see embeds section below).
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta data-embetty-server="/path/to/embetty-server">
<script async src="embetty.js"></script>
</head>
<body>
<embetty-tweet status="950371792874557440"></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.
- Download an Embetty archive from the releases page. Make
embetty.js
available on your site. - Use Embetty in your npm project:
yarn add @heise/embetty
ornpm install @heise/embetty --save
. Then import embetty into your main script (i.e.import '@heise/embetty'
). - Clone this repository and build
./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 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>
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>
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').addEventistener('initialized', function(e) { ... })
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.