Embeds guide

widgets.js (Recommended)

Drop-in replacement for Twitter's widgets.js, just change the script src url in the snippet generated by https://publish.x.com, or create your own using this template:

<blockquote class="twitter-tweet">
  <a href="https://x.com/user/status/123"></a>
</blockquote>
<script src="https://nitter.example.com/js/widgets.js"></script>

Handles auto-resizing, theme detection, and dynamically added embeds.

Blockquote Attributes

Attribute	Effect
data-theme	light, dark, or a built-in Nitter theme (twitter, black, auto, dracula, etc.)
data-width	Max width in px
data-align	left, center, right
data-media-max-width	Video-only mode (e.g. 550)

Manual Iframe

For more control, use iframes directly. Requires a resize listener to dynamically resize the iframe on load:

<iframe src="https://nitter.example.com/user/status/123/embed"
        class="nitter-embed" style="width:100%;max-width:550px;border:none">
</iframe>

<script>
window.addEventListener('message', function(e) {
  if (Array.isArray(e.data) && e.data[0] === 'resizeIframe') {
    document.querySelectorAll('iframe.nitter-embed').forEach(function(f) {
      if (f.contentWindow === e.source) f.style.height = e.data[1].h + 'px';
    });
  }
});
</script>

Theme Parameter

?theme=twitter|black|dracula|mastodon|twitter_dark

Video-Only Embed

<iframe src="https://nitter.example.com/i/videos/tweet/123"
        class="nitter-embed" style="width:100%;max-width:550px;border:none"
        allowfullscreen>
</iframe>

<script>
window.addEventListener('message', function(e) {
  if (Array.isArray(e.data) && e.data[0] === 'resizeIframe') {
    document.querySelectorAll('iframe.nitter-embed').forEach(function(f) {
      if (f.contentWindow === e.source) f.style.height = e.data[1].h + 'px';
    });
  }
});
</script>