embed

From IndieWeb

This article is a stub. You can help the IndieWeb wiki by expanding it with relevant information.


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 a static image / audio / video file).

Related spec:

Why

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

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

How to

How to display other embeds

Use an <iframe> or similar markup recommended by the person (or service) publishing the original content you want to embed.

  • 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.
  • 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>.

(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.

How to publish embed URLs

Publish URLs to embed versions of your permalinks at similar URLs, e.g. a canonical permalink suffixed with /embed.

To enable rel embed discovery on post permalink pages:

  • link from a post permalink to the embed thereof with rel=embed e.g.:
    • <link rel="embed" href="{permalink}/embed" />
    • where {permalink} is the post permalink URL

On each embed page:

  • put rel-canonical on the link back to the postpermalink, e.g. the linked published (or updated) datetime.

How to discover embed URLs

Main article: rel-embed

Consuming code should look for a rel with embed value and use that to auto-discover the embedding URL to present as a UI to publishers etc.

IndieWeb Examples

This section is a stub. You can help the IndieWeb wiki by expanding it.

Do you support such "embed" URLs on your site? Add yourself below!

Sorted roughly by date implemented/published (write a blog post about it when you implement it and cite that!)

Benji

benji -- Support by adding /embed to any post, since 2024-10-24. See https://www.benji.dog/notes/1729739188/

Kupietz

Mike Kupietz -- Support by adding /embed or ?embed to any post or page, since 2024-10-30. Renders content without any Wordpress template features (more accurately, renders it using a template that consists solely of a call to the the_content(); function within the Wordpress loop.) Also implements ?title, ?author, and ?tags URL parameters to optionally include post title, author, and/or tags in embed content. See https://michaelkupietz.com/?p=10887 (As an example, this page includes "The Infinity Iframe", an iframe embed of its own content. Don't follow it too far down or you may never return. Also: addresses some apache Content Security Header configuration concerns, also mentioned below in Brainstorming — Content Security Policy Rule Concerns.)

Add yourself!

Add yourself here… (see this for more details)

Service Examples

LibreFM

Dr. Matt Lee -- added embeds to libre.fm permalinks since 2024-10-23, see https://github.com/foocorp/hacienda/issues/53

Software Examples

Mastodon

Since version (???), Mastodon supports putting /embed on the end of a post permalink to retrieve an ultra-minimal (no JS required) HTML version of a post, suitable for embedding via an <iframe>.

Examples:

🖼 needs screenshots

Embedding Examples

Good and interesting examples of embedding content from others.

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.