HTML5 videos in lightGallery not working in Quarto websites

[dense-set]

Description

Description

I am trying to create a gallery containing photos and videos using lightGallery library. Now, outside of Quarto, I am able to do so (just writing HTML and including the appropriate external stylesheets and scripts). However, when I try to copy-paste the gallery div in a Quarto document (including all the stylesheets and scripts via include-in-header and include-after-body), I do get the same effect, except that the HTML5 videos don't get shown in the lightbox—instead I see a loading sign, and an error:

MWE that reproduces the error

_quarto.yml:

project: 
  type: website
  preview: 
    port: 5556

index.qmd:

---
format:
    html:
        include-in-header: 
            - text: | 
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.8.1/css/justifiedGallery.min.css">

                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lightgallery.min.css">

                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lg-thumbnail.min.css">

                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lg-zoom.min.css">

                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lg-video.min.css">

                <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        include-after-body: 
            - text: | 
                <script src="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js"></script>

                <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/lightgallery.min.js"></script>

                <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/plugins/thumbnail/lg-thumbnail.min.js"></script>

                <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/plugins/zoom/lg-zoom.min.js"></script>

                <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/plugins/video/lg-video.min.js"></script>

                <script>
                    $("#gallery-unfiled")
                    .justifiedGallery({
                    rowHeight: 200
                    })
                    .on("jg.complete", () => {
                    lightGallery(
                        document.getElementById("gallery-unfiled"),
                        {
                        plugins: [lgZoom, lgThumbnail, lgVideo],
                        }
                    );
                    });
                </script>
---

```{=html}
<div id="gallery-unfiled">
  <a data-video='{"source": [{"src":"video.mp4", "type":"video/mp4"}],
    "attributes": {"preload": false,  "controls": true}}'>
    <img src="image.jpg" alt="">
    </a>
</div>
```

Error thrown in the terminal

Output created: _site/index.html

Watching files for changes
GET: /
  /video.mp4 (404: Not Found)

But the file is there!

Software used

Quarto - v1.3.450 as well as 1.4.537
Browsers tried - Firefox, Safari, Arc

Note

1. Please note that there is no problem if I just write a standalone HTML file, so it appears to be a Quarto issue.
2. If I delete the _quarto.yml file, then the the standalone index.qmd renders fine!

[mcanouil]

Did you inspect the output HTML?
Did you try the 1.4 Release Candidate?

[cderv]

Can you provide a full reprocudible example. We don't have the media file in yours.

This is something probably related to the external library you are using. Maybe there is a conflict with html output with Quarto, but we need to understand what the lightGallery JS is throwing as issue.

Thanks

[dense-set]

It turns out that there's more to what's going on than I had originally thought: I forgot to mention the _quarto.yml file along with my MWE. If I delete the _quarto.yml file, then the the standalone index.qmd renders fine!

[dense-set]

I have added a minimal _quarto.yml and the error message that I get.

[cderv]

This is helpful.

You are using a specific syntax that I don't think Quarto will parse to guess the resource that needs to be copied in website output.

So use the resource key to set it manually
https://quarto.org/docs/websites/website-tools.html#site-resources

For now the error is pretty clear: the video file is not available in your website project output (_site folder) - you could check it.