No image and link for embedded video

[allefeld]

#226 (comment) says "only a picture gets included from the frame displayed when the page is exported". That would be sufficient for my purposes, if the picture would also be a clickable link to the video, but it doesn't work for me.

I have a Reveal JS presentation (generated by Quarto) with an embedded YouTube video. The embed code is similar to the code YT itself provides for embedding:

<iframe
  data-external="1"
  src="https://www.youtube.com/embed/2aO7CPLomb0?enablejsapi=1"
  width="1477"
  height="831"
  title="" frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen="">
</iframe>

Viewing the HTML in a browser, a cover image is shown and clicking on it starts the video.

When I convert this with decktape to pdf, I get a rectangular frame which contains the video title and the YT logo, but no video image and no link:

Can this be fixed? Or do I have to use different embed code?

[astefanutti]

It's possible iframe and/or YouTube make it more difficult. It seems similar to puppeteer/puppeteer#4712 and puppeteer/puppeteer#9909 (comment).

Just to be sure, have you tried increasing the pause before the slide is loaded, e.g. --pause 5000?

For the link, I would need to test it, but maybe wrapping the iframe with a link like https://stackoverflow.com/questions/28917703/wrap-href-around-an-iframe would do the trick.

[allefeld]

Wrapping with a link works, thanks!

--pause 5000 makes no difference.

You are right, it looks like the puppeteer issue you linked to. Unfortunately, it does not look like they're going to fix that.

I also tried to use Brave and Edge instead of the puppeteer-bundled Chromium, via --chrome-path, with no effect.

[astefanutti]

It may be this comes from how RevealJS handles video: https://revealjs.com/media/. I wonder whether setting autoPlayMedia to true would help, or maybe adding data-autoplay to the iframe.

[allefeld]

Auto-play, either on the iframe or through Reveal.settings, makes no difference. I also tried data-preload.

Since decktape uses actual Chromium through puppeteer, shouldn't the captured frame look exactly like the screen? What is different in this scenario which would prevent the cover image from being loaded?

I've edited the original issue report to show what it should look like.

[astefanutti]

Thanks for the update. By chance would you be able to share the sources of your presentation? That'll help me test it and try to troubleshoot what's going on?

[allefeld]

This presentation is semi-confidential, but I'll try to reproduce the problem with another presentation + video and share it.

[allefeld]

Here it is.

Reveal.js HTML, gzipped because GitHub wouldn't accept it otherwise: videotest.html.gz

PDF generated via decktape videotest.html videotest.pdf: videotest.pdf

Decktape 3.15.0 running on Node 22.17.1 installed via Volta on Debian 12.

---

The reveal.js HTML was generated via quarto render videotest.md by Quarto (1.7.29) from the Markdown file: videotest.md

[allefeld]

I'm starting to think this is not a bug in Decktape, but in Chromium.
If I load videotest.html into Chromium, the video thumbnail is shown, but if I use the built-in print to pdf it is missing.
The thumbnail is implemented as a background image, but enabling Background Graphics makes no difference.