quarto-dev / quarto-dev/quarto-cli

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

Open
#6,296 10 comments 2 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

bug video
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

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 %.

image

Actual behavior

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

image

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.