Support video provider (like Youtube) as `background-video` for revealjs

[stephan-koenig]

Bug description

Hi!

I was trying to use background videos in revealjs but they do not appear.

Steps to reproduce

Below I am using a sample YouTube link provided in the Videos – Quarto docs (here with YouTube, also did not work with Vimeo link or local video):

````qmd
---
title: "Untitled"
format: revealjs
---

## {background-video="https://youtu.be/wo9vZccmqwc?autoplay=1"}

````

Expected behavior

Render slide with background video.

Actual behavior

Empty slide with no visible video.

Your environment

Tested:

• Remotely: Posit Cloud
• Locally:
  • macOS Sequoia 15.1
  • RStudio 2024.09.0+375

Quarto check output

Result of quarto check for Posit Cloud:

Quarto 1.5.57
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.2.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.41.0: OK
      Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.5.57
      Path: /opt/quarto/bin

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

[✓] Checking LaTeX....................OK
      Using: Installation From Path
      Path: /usr/bin
      Version: 2019

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

[✓] Checking Python 3 installation....OK
      Version: 3.8.17
      Path: /tmp/RtmplwAQRa/rstudio/terminal/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.1
      Path: /opt/R/4.4.1/lib/R
      LibPaths:
        - /cloud/lib/x86_64-pc-linux-gnu-library/4.4
        - /opt/R/4.4.1/lib/R/library
      knitr: (None)
      rmarkdown: (None)

      The knitr package is not available in this R installation.
      Install with install.packages("knitr")
      The rmarkdown package is not available in this R installation.
      Install with install.packages("rmarkdown")

[cscheid]

Thanks, I can repro this.

[cderv]

We are hitting RevealJS limitation here.

I believe background-video is only for video file. It is not for video through a service provider like youtube.

I found an old Revealjs issue on this

• Embeded youtube video as background? hakimel/reveal.js#1455 linking to an unmerged PR Add "background div" to allow HTML backgrounds hakimel/reveal.js#1465

For those, it would require to use an iframe IMO. And it seems this is what we have tried in the past with our video Quarto extension integration

Internal note from our now private video extension

This was done in

• https://github.com/quarto-ext/video/issues/26 (PR https://github.com/quarto-ext/video/pull/28)

with a Lua filter

local videoHelpers = dofile(quarto.utils.resolvePath('video.lua'))
local getSnippetFromBuilders = videoHelpers['video-helpers'].getSnippetFromBuilders

function Header(el)
   local videoSnippetPrefixes = {'www.youtube.com', 'player.vimeo.com', 'players.brightcove'}
   local isVideoSnippet = function(source)
      for i = 1, #videoSnippetPrefixes do
         if string.match(source, videoSnippetPrefixes[i]) then return true end
      end

      return false
   end

   if el.attributes['background-video'] then
      local snippet = getSnippetFromBuilders(el.attributes['background-video'])

      if isVideoSnippet(snippet.src) then
         el.attributes['background-iframe'] = snippet.src
         el.attributes['background-video'] = nil
         return el
      end
   end

end

However, it seems we loose the feature when bringing the video extension as built in to Quarto. So our doc is not correct at https://quarto.org/docs/authoring/videos.html#backgrounds

To be clear, this is not working in 1.3, 1.4, or 1.5.

By the way, I'll update the doc to make clear that revealjs background video works with video source as in video filesource. (doc says "A single video source, or a comma separated list of video sources."

[cderv]

However, it seems we loose the feature when bringing the video extension as built in to Quarto.

In fact we did not loose it. The filter is here:
https://github.com/quarto-dev/quarto-cli/blob/5c8d37acc50fb13621f6c0d2c7f66e768feacc05/src/resources/extensions/quarto/video/video-filter.lua

However, we embed the video extension in quarto to make the video shortcode available but I don't think there is a way to call a filter in an internal extension. Do you know @cscheid ?

Anyhow, we did embed the extension without making sure this revealjs feature works

• Feature/video shortcode #2651

I am considering this enhancement because it has never worked as it was documented.

[cderv]

Currently this would be the way

• Using background-iframe
• Using embed link from youtube

---
title: "Untitled"
format: revealjs
---

## First

## {background-iframe="https://www.youtube.com/embed/wo9vZccmqwc"}