lecture.studio

Video, iframes and SVG in Marp slides: what renders where

By Ekrem Çetinkaya · Published

Marp renders a <video> tag by default (it is on Marp Core 4's HTML allowlist), so a local clip plays in the HTML export; an <iframe> and inline <svg> markup are not on the allowlist and need --html in marp-cli or all in VS Code; an SVG file works as an image in every export. PDF and PPTX are static: a video becomes its poster frame, an iframe a blank box.

This guide shows each with the exact syntax, says which export keeps it, and gives the pattern for a lecture that must also be a PDF: a still image on the slide, the video linked.

Video

<video src="assets/demo.mp4" controls width="900"></video>

Attributes Marp keeps: src, controls, autoplay, loop, muted, preload, width, height, poster. Autoplay needs muted in every browser. The file path is relative to the deck; for the HTML export, the video file must sit next to the HTML at the same relative path (marp-cli does not copy it).

In the PDF there is no video: the slide shows the poster image if you set one, otherwise an empty area. So:

<video src="assets/demo.mp4" poster="assets/demo-poster.png" controls width="900"></video>

A YouTube video is an iframe, below.

Iframes

<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="900" height="506" allowfullscreen></iframe>

Stripped by default. Enable HTML:

marp deck.md --html

or markdown.marp.html: all in VS Code. Then the frame renders in the HTML export and plays in a browser. In the PDF it is blank. An iframe also makes the deck depend on the network and on the embedded site, which is a risk in a lecture room; for anything you must show, download it and use <video>.

SVG

As an image, everywhere:

![w:700](assets/scheduler.svg)

Inline SVG (<svg>…</svg> pasted into the slide) is not on the default allowlist: it renders only with HTML enabled (--html), and then it scales with the slide and can be styled by the theme. For diagrams generated by a tool (Mermaid, Graphviz, draw.io), the image form is simpler and portable; see Mermaid in Marp.

Audio

<audio src="assets/clip.mp3" controls></audio> renders like video and is on the allowlist. Same PDF caveat: nothing plays.

The pattern for a deck that must be a PDF

  1. Put a still frame on the slide (![w:900](assets/demo-poster.png)) with a caption saying what the clip shows.
  2. Link the video under it: [Watch the demo (2:10)](https://…) or the file path.
  3. In the HTML export, replace the still with the <video> tag if you present from HTML; or keep the still and play the file from the desktop.

The PDF then has a meaningful image and a link, and the room gets the clip either way.

Where each works

HTML export PDF PPTX VS Code preview Lecture Studio
<video> plays poster or blank image of the poster plays plays
<iframe> with --html blank blank with html: all renders (HTML enabled)
SVG image yes yes yes yes yes
Inline SVG with --html with --html with --html with html: all renders (HTML enabled)

FAQ

How do I embed a video in Marp?

<video src="clip.mp4" controls width="900"></video> on the slide; it plays in the HTML export and previews. Add a poster image for the PDF.

Can I embed a YouTube video in Marp?

With an <iframe> and HTML enabled (--html in marp-cli, markdown.marp.html: all in VS Code). It plays in the browser and is blank in PDF.

Does Marp support SVG?

Yes, as an image (![w:600](fig.svg)) in every export; inline <svg> markup needs HTML enabled.

Why is my video missing in the PDF?

PDF is static. Set a poster image on the video tag and link the clip; the slide then shows the still.

More guides