quarto-dev / quarto-dev/quarto-cli
video shortcode, when in revealjs column, does not respect % dimensions
Nobody has claimed this yet.
- 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., . 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.