Thanks to visit codestin.com
Credit goes to github.com

Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
arthur-shaw opened this issue Jul 20, 2023 · 10 comments
Open
Assignees
Labels
bug Something isn't working video
Milestone

Comments

@arthur-shaw
Copy link

arthur-shaw commented Jul 20, 2023

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
@arthur-shaw arthur-shaw added the bug Something isn't working label Jul 20, 2023
@mcanouil mcanouil added the video label Jul 20, 2023
@cscheid
Copy link
Collaborator

cscheid commented Jul 20, 2023

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
Copy link
Author

arthur-shaw commented Jul 20, 2023

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

image

@mcanouil
Copy link
Collaborator

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
Copy link
Author

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:

image

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

::::

@cscheid cscheid added this to the v1.4 milestone Nov 30, 2023
@cscheid cscheid assigned cscheid and unassigned rich-iannone Dec 13, 2023
@cscheid cscheid modified the milestones: v1.4, v1.5 Dec 13, 2023
@jpmorr
Copy link

jpmorr commented Apr 22, 2024

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.

@cscheid cscheid modified the milestones: v1.5, Future Jun 17, 2024
@astrowonk
Copy link

astrowonk commented Apr 30, 2025

This bug is still present in 1.7.29. The basic example code on the quarto video documentation. Similar issues occur with local files. I'm using the workaround to specify it in pixels.

Absent any width/height settings, video overflows the bottom of the slide.

{{< video https://youtu.be/wo9vZccmqwc width="100%" height="100%" >}}

creates a wide short video:

Image

@mcanouil
Copy link
Collaborator

@astrowonk As you can see, the issue is still opened, thus not fixed.
Note that by posting, you trigger notifications to all participants.

Please also properly format your message using proper markdown syntax, for instance use backticks for inline code or code block (there are buttons in the GitHub UI to help with that).
And adding alternative text is advised when sharing screenshots.

@astrowonk
Copy link

astrowonk commented Apr 30, 2025

@astrowonk As you can see, the issue is still opened, thus not fixed.
Note that by posting, you trigger notifications to all participants.

Please also properly format your message using proper markdown syntax, for instance use backticks for inline code or code block (there are buttons in the GitHub UI to help with that).
And adding alternative text is advised when sharing screenshots.

Note that by replying to my reply, you also trigger notifications for all participants. Notifications can be altered in github settings if you do not wish to receive emails, etc.

The point is that the issue is not fixed & the example in the documentation does not work. Nitpicking comments or issues does not encourage participation.

@mcanouil
Copy link
Collaborator

You are completely missing the point.

  • maintainers read all issues and discussions (you cannot ask them to unsubscribe)
  • maintainers do update issues when there is something to update about
  • opened issues mean the bugs are not fixed or enhancements not implemented

There are almost 1,500 opened issues. Commenting that those are not fixed does not help fix them. It cost you time to write the comments and cost time to maintainers to read/triage them.

GitHub has a reaction feature which allows users to add reactions to an issue such as thumb up. This is more useful to maintainers because issues can be sorted by the number of reactions thus maintainers can use that as a proxy of the interest on the bug fix or enhancement to eventually prioritise.

@cscheid
Copy link
Collaborator

cscheid commented May 1, 2025

@astrowonk We do prefer that you upvote instead of commenting. It really is a matter of improving signal-to-noise for us. We appreciate the understanding.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working video
Projects
None yet
Development

No branches or pull requests

6 participants