video shortcode, when in revealjs column, does not respect % dimensions

arthur-shaw commented 1 year ago

Bug description

According to the documentation, video shortcodes in revealjs should produce videos that respect the height and width specified as %. While shortcodes work as expected when videos occupy the full body of a slide, they do not when videos are placed in columns--unless video dimensions are specified in pixels.

While far from an HTML/CSS expert, I suspect that the issue might lie with the HTML/CSS being written by Quarto--potentially with the column class applied to revealjs columns.

This behavior does not arise when local video files are provided via Markdown syntax (e.g., ![](path/to/my_video.mp4). They simply grow/shrink the space available in revealjs columns.

Steps to reproduce

---
format: revealjs
---

# `video` in slide body

## Shortcode, without dimensions

{{< video https://www.youtube.com/embed/yvi5uXQMvu4 >}}

## Shortcode, with dimensions = 100%

{{< video https://www.youtube.com/embed/yvi5uXQMvu4 width="100%" height="100%" >}}

## Shortcode, with < 100% dimensions

{{< video https://www.youtube.com/embed/yvi5uXQMvu4 width="100%" height="85%" >}}

## iframe, with < 100% dimensions

<iframe width="100%" height="85%" src="https://www.youtube.com/embed/yvi5uXQMvu4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

# `video` in column

## Without dimensions

:::: {.columns}

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

{{< video https://www.youtube.com/embed/yvi5uXQMvu4 >}}

:::

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

Some arbitrary content

:::

::::

## With dimensions = 100%

:::: {.columns}

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

{{< video https://www.youtube.com/embed/yvi5uXQMvu4 width="100%" height="100%" >}}

:::

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

Some arbitrary content

:::

::::

## With dimensions < 100%

:::: {.columns}

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

{{< video https://www.youtube.com/embed/yvi5uXQMvu4 width="100%" height="85%" >}}

:::

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

Some arbitrary content

:::

::::

## iframe, dimensions = 100%

:::: {.columns}

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

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/yvi5uXQMvu4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

:::

::: {.column width="30%"}
Some arbitrary content
:::

::::

## iframe, dimensions < 100%

:::: {.columns}

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

<iframe width="100%" height="85%" src="https://www.youtube.com/embed/yvi5uXQMvu4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

:::

::: {.column width="30%"}
Arbitrary content
:::

::::

## iframe, dimensions in px

:::: {.columns}

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

<iframe width="760" height="515" src="https://www.youtube.com/embed/yvi5uXQMvu4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

:::

::: {.column width="30%"}
Some arbitrary content
:::

::::

## Shortcode, dimensions in px

:::: {.columns}

::: {.column width="70%"}
{{< video https://www.youtube.com/embed/yvi5uXQMvu4 width="760" height="515" >}}
:::

::: {.column width="30%"}
Right column
:::

::::

Expected behavior

Video shortcode should produce a video that respects width and height dimensions specified in %.

Actual behavior

Video shortcodes respect width but not height when those dimensions are specified in %.

Your environment

IDE: VScode
OS: Windows 10

I've also replicated this in other environments (e.g., RStudio as IDE, Pop_OS! as OS, etc.)

Quarto check output

[>] Checking Quarto installation......OK
      Version: 1.2.269
      Path: C:\Program Files\RStudio\resources\app\bin\quarto\bin
      CodePage: 1252

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....OK
      Version: 3.9.7 (Conda)
      Path: C:/wbg/Anaconda3/python.exe
      Jupyter: 4.8.1
      Kernels: python3

[>] Checking Jupyter engine render....OK

[>] Checking R installation...........OK
      Version: 4.2.2
      Path: C:/PROGRA~1/R/R-42~1.2
      LibPaths:
        - C:/Program Files/R/R-4.2.2/library
      rmarkdown: 2.22

[>] Checking Knitr engine render......OK

cscheid commented 1 year ago

Thanks for the report. You're running a slightly older version of quarto:

Version: 1.2.269

Can you install the latest version and confirm that the problem persists?

arthur-shaw commented 1 year ago

Unfortunately, I can't quickly install the latest version on the device used for reporting above; it's a corporate device. But I have a recent version of Quarto (1.3.340) on another device and can reproduce the problem there. (Separately, likely because I'm a Linux newb, I couldn't uninstall old/install new version of Quarto with dpkg or gdebi)

Environments

Environment 1:

IDE: VSCode
OS: Pop!_OS 22.04 LTS

Environment 2:

IDE: RStudio 2023.03.0+386 "Cherry Blossom" Release (3c53477afb13ab959aeb5b34df1f10c237b256c3, 2023-03-09) for Ubuntu Jammy Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) rstudio/2023.03.0+386 Chrome/108.0.5359.179 Electron/22.0.3 Safari/537.36
OS: Pop!_OS 22.04 LTS

Quarto check

[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.1: OK
      Dart Sass version 1.55.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.3.340
      Path: /home/arthur/opt/quarto-1.3.340/bin

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.10.6
      Path: /usr/bin/python3
      Jupyter: 5.3.0
      Kernels: python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
      Version: 4.3.1
      Path: /usr/lib/R
      LibPaths:
        - /home/arthur/R/x86_64-pc-linux-gnu-library/4.3
        - /usr/local/lib/R/site-library
        - /usr/lib/R/site-library
        - /usr/lib/R/library
      knitr: 1.43
      rmarkdown: 2.23

[✓] Checking Knitr engine render......OK

Result

mcanouil commented 1 year ago

From the example, I am not entirely sure what's not working exactly. Could you update your example to make it clearer what works or not as you'd expect?

arthur-shaw commented 1 year ago

Sorry for the long and confusing initial post.

When local videos are included in a multi-column layout, they seem to grow to fill their column container. If one writes something like the code below...


# My slide

:::: {.columns}

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

![](path/to/my_video.mp4)

:::

::: {.column width="30%"}
Video grows to fill its container, subject to size of container and intrinsic dimensions of the video..
:::

::::

...then the video basically grows to fill its column container. Here's an example:

If useful, here's the slide, and here the source code.

I expect that videos sourced from, say, YouTube and included via the video shortcode should be displayed in the same way (i.e., automagically grow to fill its container).

Unfortunately, videos sourced with the video shortcode appear to display differently. While they grow to fill the width of their container, they don't grow to fill their height. When one provides height and width as percentages, they still don't grow to fill their container (according to those percentages).


# `video` in column

## Without dimensions

:::: {.columns}

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

{{< video https://www.youtube.com/embed/yvi5uXQMvu4 >}}

:::

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

Without dimensions specified, the video appears quite small--perhaps the size of its YouTube thumbnail (?)

:::

::::

## With dimensions = 100%

:::: {.columns}

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

{{< video https://www.youtube.com/embed/yvi5uXQMvu4 width="100%" height="100%" >}}

:::

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

When instructed to occupy 100% of the width and heigth of its container, the video only obeys on the width dimension. The height is too short.

:::

::::

## With dimensions < 100%

:::: {.columns}

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

{{< video https://www.youtube.com/embed/yvi5uXQMvu4 width="100%" height="85%" >}}

:::

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

Similar problem as above

:::

::::

It's only when one provides pixel dimensions manually that the video can be coerced to fill its container in the same way that a local image does automatically.


## Shortcode, dimensions in px

:::: {.columns}

::: {.column width="70%"}
{{< video https://www.youtube.com/embed/yvi5uXQMvu4 width="760" height="515" >}}
:::

::: {.column width="30%"}
The video finally grows to desired dimensions. Unfortunately, this requires the user to specify dimensions in pixels.
:::

::::

jpmorr commented 6 months ago

It's only when one provides pixel dimensions manually that the video can be coerced to fill its container in the same way that a >local image does automatically.

Thanks for this - This is exactly the workaround I was looking for until it's fixed in some future version.

quarto-dev / quarto-cli