Skip to content

Uncentered play button on video divs #13411

@bruvellu

Description

@bruvellu

I have:

  • searched the issue tracker for similar issues
  • installed the latest version of Quarto CLI
  • formatted my issue following the Bug Reports guide

Bug description

Hello, when rendering videos using the cross-reference div, the play button is not centered:

Image

It appears that the video-js.css class that controls that (vjs-big-play-centered) is not being added to the corresponding HTML element (id="video_shortcode_videojs_video1"). Adding the class to the div below fixes the issue:

<div title="" data-setup="{}" preload="auto" class="video-js vjs-default-skin vjs-fluid vjs-paused video_shortcode_videojs_video1-dimensions vjs-controls-enabled vjs-workinghover vjs-v7 vjs-user-active {{ HERE }}" id="video_shortcode_videojs_video1" tabindex="-1" lang="en" translate="no" role="region" aria-label="Video Player">(...)</div>
Image

Steps to reproduce

Here's a minimal example to reproduce the issue:

---
title: Uncentered play button on video divs
format: html
---

::: {#fig-video}

{{< video https://upload.wikimedia.org/wikipedia/commons/b/b6/Drosophila_cleavage_and_gastrulation.webm >}}

An external video.

:::

Actual behavior

No response

Expected behavior

No response

Your environment

  • OS: Ubuntu 24.04

Quarto check output

quarto check
Quarto 1.8.24
[✓] Checking environment information...
      Quarto cache location: /home/bruno/.cache/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.6.3: OK
      Dart Sass version 1.87.0: OK
      Deno version 2.3.1: OK
      Typst version 0.13.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.8.24
      Path: /opt/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: v2025.09
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /home/bruno/.TinyTeX/bin/x86_64-linux
      Version: 2025

[✓] Checking Chrome Headless....................OK
      Chrome:  (not detected)

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

[✓] Checking Python 3 installation....OK
      Version: 3.12.3
      Path: /usr/bin/python3
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

[✓] Checking R installation...........OK
      Version: 4.4.2
      Path: /usr/lib/R
      LibPaths:
        - /home/bruno/R/x86_64-pc-linux-gnu-library/4.4
        - /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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingshortcodesissues related to shortcodesvideo

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions