quarto-dev / quarto-dev/quarto-cli
{{< video >}} shortcode: Inconsistent scaling for MP4 vs. YouTube & HTML vs. Reveal.js
@cderv is already working on this.
Since Mar 13, 2025.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
Bug description
I am regularly working with Quarto documents that I need to render to both (regular) HTML and Reveal.js and publish in both formats. I'd love to use the {{< video >}} shortcode as a convenient solution for including videos that are "meaningfully" auto-scaled for either format. However, this is complicated by the fact that scaling behavior seems to be inconsistent for MP4 vs. YouTube videos, which moreover also depends on HTML vs. Reveal.js output.
Steps to reproduce
- Save the Quarto document below to
index.qmd. - Compile via
quarto render index.qmd --to htmland inspect results. - Compile via
quarto render index.qmd --to revealjsand compare results to HTML output.
# Without additional options
## `.mp4` video
{{< video https://file-examples.com/wp-content/storage/2017/04/file_example_MP4_1280_10MG.mp4 >}}
## YouTube video
{{< video https://www.youtube.com/embed/wo9vZccmqwc >}}
# With `width="100%"` option
## `.mp4` video
{{< video https://file-examples.com/wp-content/storage/2017/04/file_example_MP4_1280_10MG.mp4 width="100%" >}}
## YouTube video
{{< video https://www.youtube.com/embed/wo9vZccmqwc width="100%" >}}
Actual behavior
Without additional options:
- HTML:
- Works as expected for both MP4 and YouTube videos.
- I.e., video scaled to a width of 100%, and height will be automatically chosen such as to preserve aspect ratio
- Revealjs:
- Works as expected for MP4, but not YouTube video
- YouTube video scaled to very small rectangle that seems to retain original aspect ratio, but definitely does not cover full page width.
With width="100%" option:
Different results for MP4 and YouTube videos, but either consistent across HTML and Revealjs output:
- MP4 video will be scaled to a very small rectangle that seems to retain original aspect ratio, but definitely does not cover full page width.
- YouTube video's width will be scaled to 100%, but aspect ratio of video window will not be preserved. But also, height does not just remain unchanged in comparison to when
widthoption is not provided at all -- instead, video actually shrinks in height!
Expected behavior
To me it seems, that the behavior described above might not be consistent with the documentation (note that I am aware that the presence of width/height options disables responsive sizing). I might partly misunderstand the intended design from the documentation, but even then, I would expect consistent behavior across video type (MP4 vs. YouTube) and output format (HTML vs. Reveal.js)
Ideally (from the viewpoint of how the {{< video >}} shortcode could be made most useful), I guess I would expect the following:
- HTML: Videos should automatically scale to a width of 100% (even in the absence of an explicit option) and to a height that then preserves the original aspect ratio, regardless of whether it's an MP4 or YouTube video.
- Reveal.js: Here one could perhaps argue that the video's height should not exceed the screen height and width should then be automatically chosen such as to preserve aspect ratio. Or, as a second-best option, apply the same strategy as for HTML described above.
Your environment
- IDE: vim & bash terminal
- OS: DebianGNU/Linux
Quarto check output
Quarto 1.6.42
[✓] Checking environment information...
Quarto cache location: /home/flo/.cache/quarto
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.4.0: OK
Dart Sass version 1.70.0: OK
Deno version 1.46.3: OK
Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.6.42
Path: /opt/quarto/bin
[✓] Checking tools....................OK
TinyTeX: (not installed)
Chromium: (not installed)
[✓] Checking LaTeX....................OK
Using: Installation From Path
Path: /usr/bin
Version: 2024
[✓] Checking basic markdown render....OK
[✓] Checking Python 3 installation....OK
Version: 3.12.7
Path: /usr/bin/python3
Jupyter: 5.7.2
Kernels: python3
[✓] Checking Jupyter engine render....OK
[✓] Checking R installation...........OK
Version: 4.4.1
Path: /usr/lib/R
LibPaths:
- /usr/local/lib/R/site-library
- /usr/lib/R/site-library
- /usr/lib/R/library
knitr: 1.48
rmarkdown: 2.27
[✓] 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.