embed

From IndieWeb


embed is code (usually just HTML like an iframe, sometimes with JS) for showing content from another website on your website or inside a post that is included by viewer’s browser and typically has some interactive aspect (more than just a static image / audio / video file).

Why

There are lots of reasons to embed content (transclude if you fancy yourself a fancy hypertexter) from another website into your posts. E.g. some common use-cases:

  • Embedding a tweet as a pull-quote or citation
  • Add a CC-licensed image from Flickr to your post to illustrate a point
  • ...

How to

  • At a minimum, just use the recommended iframe or similar markup recommended by the person (or service) publishing the original content you want to embed.
  • If you want to explicitly mark up your embeds for discovery, indexing, etc., use h-cite to to indicate the presence of the embed, with at least a u-url on the element that does the literal embedding of the content, e.g. img or iframe.
  • If you use an <iframe> tag to embed, be sure to provide accessible alternative text in its aria-label attribute (see MDN docs, dev opera article) as it’s better for alt text than the title attribute which has other presentational effects.

(actual minimal HTML + h-cite example would be good here)

WARNING:

  • DO NOT use properties like u-photo or u-video on an embedding element without wrapping it in an h-cite. Doing so associates that content directly with your own h-entry, which presumably lists you as a p-author, thereby erroneously claiming that you took and/or own the content being embedded which is unlikely if you are embedding it from another site.

Examples

Good and interesting examples of embedding

The Guardian

When The Guardian embeds a TikTok video, they show a consent banner in place of the embed, that allows you to opt-in to load that specific TikTok video.

BBC

When the BBC embeds a Tweet (and media from other sites [citation required]), they show a consente banner. You must opt in to load the third-party embedded media before it renders on the page.

Silo Issues

tracking

When you embed a resource from a silo inside a post on your site, your are exposing people using your site to being tracked by that silo.

Instagram

Twitter

(stub)

As of 2022-??? Twitter tweet embeds show awkward empty blocks when the tweet is deleted.

See Also