Why should I use iFrames?

In Quarto Presentations one way to add something extra is to use Slide Backgrounds

Images and videos are good for some added flair, and they automatically fill the background

Using html elements and javascript to make an animated background, is almost impossible to get right inside your .qmd file, but super easy with iFrame Backgrounds

How to use iFrame Backgrounds

Add a folder next to your .qmd file
In that folder add the following files
- index.html
- script.js (optional)
- style.css (optional)
Use the following notation to use (title can be empty)

# title {background-iframe=“my-iframe/index.html”}

Set preload-iframes: true in yaml

Folder Structures

This is my preferred setup for a quarto presentation.

Naming the main file index.qmd gives you index.html as your output which is a good default for publishing

awesome-presentation/

├── index.qmd

├── index.html

├── style.scss (only styles index.qmd)

└── my-iframe/

    ├── index.html

    ├── script.js

    └── style.css (only styles iframe)