quartoreveal.js

How can I add two videos (side by side) in a quarto/revealjs presentation?


I cannot find a way to put two videos side by side in quarto/revealjs.

---
title: "prueba"
format: revealjs
---

## Text

::: columns
::: {.column width="50%"}
Blah
:::

::: {.column width="50%"}
Bleh
:::
:::

## Images

::: columns
::: {.column width="50%"}
![cat](pexels-pixabay-45201.jpg)
:::

::: {.column width="50%"}
![cat](pexels-pixabay-45201.jpg)
:::
:::

## Videos

::: columns
::: {.column width="50%"}
<video autoplay loop><source src="full.mp4" type="video/mp4"</video>
:::

::: {.column width="50%"}
<video autoplay loop><source src="zoom.mp4" type="video/mp4"</video>
:::
:::

Is it possible? Is the column environment the way to go? I get a blank screen for the third slide.


Solution

  • Here is a way:

    ---
    title: "prueba"
    format: revealjs
    ---
    
    ## Videos
    
    ::: columns
    ::: {.column width="50%"}
    
    ### First Video
    {{< video https://youtu.be/wo9vZccmqwc width="100%" height="100%" >}}
    :::
    
    ::: {.column width="50%"}
    ### Second Video
    {{< video https://youtu.be/wo9vZccmqwc width="100%" height="100%" >}}
    :::
    :::