Looping video

[kir0ul]

Hi,

Thanks for this super useful tool!

I was wondering if there's a way to add a loop="true" attribute to a <video> element in a reveal.js presentation?

[mcanouil]

I am not sure to understand your issue.
Reveal.js is HTML, so everything possible in HTML (which includes make a video start over in a loop) is possible the exact same way, although you myght be mixing two syntax, the one for <embed loop="true"> and <video loop> (https://www.w3schools.com/TAgs/att_video_loop.asp).
There is also a special syntax for YouTube videos (see https://www.w3schools.com/html/html_youtube.asp).

[danielvartan]

@JekelyLab, your solution didn’t work for me. Here’s an HTML alternative in case anyone else is looking.

<video width="90%" style="display: block; margin: 0 auto;" controls muted autoplay loop>
  <source src="video.webm" type="video/webm">
</video>

[JekelyLab]

Thanks, this works. However, I couldn't combine it with the columns syntax:

::: columns
::: {.column width="40%"}
<video width="50%" style="display: block; margin: 0 auto;" controls muted autoplay loop>
  <source src="video1.webm" type="video/webm">
</video>
:::
::: {.column width="60%"}
<video width="50%" style="display: block; margin: 0 auto;" controls muted autoplay loop>
  <source src="video2.webm" type="video/webm">
</video>
:::
:::

[mcanouil]

A Quarto document should never contain bare HTML (or LaTeX, or Typst, etc.) code.

See Markdown basics - raw content.

Note also that by default, elements are relative to each other, so you are setting your videos to be half the width of the container.

[mcanouil]

---
title: "Testing"
format: html
engine: markdown
---

::: {.columns}

::: {.column width="40%"}

```{=html}
<video width="50%" style="display: block; margin: 0 auto;" controls muted autoplay loop>
  <source src="video.webm" type="video/webm">
</video>
```

:::

::: {.column width="60%"}

```{=html}
<video width="50%" style="display: block; margin: 0 auto;" controls muted autoplay loop>
  <source src="video.webm" type="video/webm">
</video>
```

:::

:::

Screen.Recording.2025-02-26.at.12.08.40.mov

[cderv]

This is now tracked in #3210 as a feature request