Documentation menu

Video block

A static preview image in the inbox that opens the file when tapped, and a real working <video> player on the hosted live view. No email client executes media playback, so this is the one block where the mailed tier and the live-view tier are genuinely different renders rather than a kinetic/fallback split of the same markup.

How it works

Because no email client — not Gmail, not Outlook, not anything in between — can play a video inline, there's no kinetic tier to speak of here the way a poll or accordion has one. Mailed HTML always renders a static preview: your poster image, if you set one, displayed as a plain full-width <img> wrapped in a link straight to the video file (or a page you point it at); if you left the poster blank, a placeholder box renders instead — a solid dark rectangle with a ▶ glyph and a caption (the description text, plus a formatted M:SS duration if you set one) so the block still communicates what it is even with no image supplied. Tapping either version opens src directly, the same click-through pattern a linked Image block already uses, and the click is tracked in the block-level click heatmap.

The hosted live view is a real page a human is actively viewing, not an inbox constrained to what email clients can render — so there, the same block renders a genuine <video controls> element instead, with your poster image set as the poster attribute if you provided one and the description as its aria-label. This split is driven by the same signal every backend-branching emitter in the codebase uses: whether a base URL is present (mail) or absent (live view) at render time — there's no separate "live-view video" block to configure, just one block whose two tiers genuinely diverge in what they can do.

The block takes a plain URL for src — you host the video file yourself; MailInApp doesn't store video files. The poster image is different: it comes from the media library, so the Inspector shows a thumbnail and a Choose image… button rather than a URL box — pick an already-uploaded image or upload a new one right there. If src is empty, the block doesn't render at all, on either tier.

Configurable fields:

  • Video URL — the file (or page) the mailed preview links to, and the live-view player's src.
  • Poster image — shown as the mailed preview image and set as the live-view <video>'s poster; picked from your media library.
  • Description — used as the placeholder caption (when no poster is set) and the live-view player's aria-label.
  • Duration (seconds) — formats into the placeholder caption as M:SS; 0 omits it.
  • Width (%) — 10–100.
  • Background color, padding, border and border radius on the frame.

Video is pure content: there's nothing to answer, so completions and watch time aren't tracked — only the click-through itself shows up, in the click heatmap, the same as any other linked block.

Examples

Subject

Watch: our product launch recap

A product-launch email embeds a 30-second teaser: recipients tap the poster image in their inbox to open the full video on your site or CDN, while anyone who instead opens the campaign's hosted live view gets to watch it inline without leaving the page. A course-recap digest links each lesson's recording the same way, with the duration field giving recipients a sense of the time commitment before they tap through. A customer testimonial video sits inside a case-study email with a still frame from the video as its poster, so the preview reads as a real photo rather than a generic placeholder box.

What the static fallback looks like

<a href="https://cdn.example.com/launch-teaser.mp4"
   style="display:block">
  <div style="box-sizing:border-box;overflow:hidden;width:100%;max-width:100%">
    <img src="https://cdn.example.com/launch-teaser-poster.jpg" alt="Launch teaser"
         style="display:block;width:100%;max-width:100%" />
  </div>
</a>

This is the mailed tier: a poster image wrapped in a plain link to the video file — the live view's real <video controls> element only renders on the hosted page, never in mail.