This post tests how Amytis renders multimedia content embedded via raw HTML iframes and native HTML5 media elements. Since rehype-raw is enabled, standard HTML embed codes work directly inside Markdown.
Responsive 16
YouTube embed using a padded wrapper:
"Me at the zoo" — the very first video uploaded to YouTube (April 23, 2005).
Vimeo also supports responsive 16
embedding:
Big Buck Bunny (2008) — open-source animated short by the Blender Foundation.
Spotify provides a fixed-height iframe embed for individual episodes:
You can also embed the full show player at a taller height (352px) to show the episode list:
Apple Podcasts uses a similar iframe embed pattern:
A YouTube Live channel or active live video can be embedded exactly like a regular video. Use the channel's live URL (/live) or a live event ID:
Below is NASA's public live stream:
Twitch requires your site's hostname in the parent query parameter (so the embed works in production):
Twitch also supports embedding past broadcasts (VODs) and clips:
Native <video> and <audio> elements work without any third-party embeds.
<video controls style="width: 100%; border-radius: 12px; margin: 1rem 0; background: #000;" poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg"
Your browser does not support the HTML5 video element.
Elephants Dream (2006) — first open-source animated film by the Blender Foundation.
Attributes you can use:
| Attribute | Description |
|---|---|
controls | Show playback controls |
autoplay | Start playing automatically (use with muted) |
muted | Mute by default (required for autoplay) |
loop | Loop the video |
poster | Preview image shown before play |
preload | auto | metadata | none |
<audio controls style="width: 100%; margin: 1rem 0;"
Your browser does not support the HTML5 audio element.
SoundHelix royalty-free sample track.
Multiple formats improve cross-browser support:
SoundCloud exposes an iframe embed from any track's "Share → Embed" menu:
The full visual player (300px height) shows the waveform:
Bandcamp provides both album and track embed codes:
When embedding third-party media, keep these in mind:
padding-bottom: 56.25%; position: relative container to maintain 16 ratio.loading="lazy": Add this to below-the-fold embeds to defer loading and improve page speed.title attribute: Always provide a descriptive title for screen reader accessibility.youtube-nocookie.com to reduce tracking when embeds don't auto-play.allow over allowfullscreen: Use allow="fullscreen" instead of the deprecated allowfullscreen boolean attribute. Note that bare allow="fullscreen" restricts fullscreen to the iframe's own origin (more secure), whereas the legacy allowfullscreen was equivalent to allow="fullscreen *" (any origin). For third-party embeds like YouTube or Vimeo, allow="fullscreen" is the correct and preferred form. When both attributes are present the browser warns that allow takes precedence.sandbox attribute: Use for untrusted embeds to restrict what the iframe can do.parent parameter: Twitch requires your site's hostname in parent for embeds to work outside localhost.此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。