Multimedia Showcase: Video, Podcasts & Embeds

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.

---

YouTube Video

Responsive 16:9 YouTube embed using a padded wrapper:

"Me at the zoo" — the very first video uploaded to YouTube (April 23, 2005).

---

Vimeo Video

Vimeo also supports responsive 16:9 embedding:

Big Buck Bunny (2008) — open-source animated short by the Blender Foundation.

---

Podcast Embeds

Spotify Podcast

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

Apple Podcasts uses a similar iframe embed pattern:

---

Livestream Embeds

YouTube Live

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 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:

---

HTML5 Native Media

Native <video> and <audio> elements work without any third-party embeds.

HTML5 Video

<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:

HTML5 Audio

<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:

---

Audio Platforms

SoundCloud

SoundCloud exposes an iframe embed from any track's "Share → Embed" menu:

The full visual player (300px height) shows the waveform:

Bandcamp

Bandcamp provides both album and track embed codes:

---

Embed Best Practices

When embedding third-party media, keep these in mind:

• Responsive sizing: Wrap iframes in a padding-bottom: 56.25%; position: relative container to maintain 16:9 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.
• Privacy-enhanced mode: YouTube supports 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.
• Twitch parent parameter: Twitch requires your site's hostname in parent for embeds to work outside localhost.