lightgallery.js | Full featured JavaScript image & video gallery | Widget library

I assume, the different nesting depths might cause the problem.
If you check the official Mixed Contents docs, the code should looks like this:

HTML structure:

First, in webpack.mix.js, do you need the SASS line? Because it's causing issues.

Here's a working JSFiddle. Here's what I did, working through the installation page I referenced yesterday:

1. Starting in the "Include CSS and Javascript files" section, they say to include lightgallery.css, though they don't give a link for it. I searched and found a CDN link, and added that ;

2. Added a CDN link to the latest jQuery;

3. Copied and added the 'jsdelivr collection' link for the Lightgallery JS;

4. Copied the JS they show to initiate the plugin;

5. Copied the relevant part of your HTML snippet - just the lightgallery div, with some minor updates:

   • Neither video-poster1.jpg nor img/thumb1.jpg exist here of course, so I replaced them with placeholder images;
   • I get "Video unavailable" for that video, so I randomly picked another;

This works fine - the placeholder thumbnail is shown, when I click it the video opens against a black background, and plays if I click play. Here's the code:

You are trying to obscure client data, which (for obvious reasons) resides in the client.
So you can't really obscure it.
You can force the user to login with their credentials, which is how authentication using username and password is done.

The culprit was the :has() used in the selector option in the script. :has() is a jQuery extension and not part of the CSS specification and, thus, cannot be used in pure JS scripts.

UPDATE:

This is the code I'm using now:

You need to append html to id="animated-thumbs" before initialising gallery, or reinitialize gallery after appending html. Something like:

$('#animated-thumbs').lightGallery().destroy(true);

$('#animated-thumbs').append('

$('#animated-thumbs').lightGallery({ //params });

Please note that this is just description code and it will not work if you just copy it. Check gallery documentation on how to call destroy method (usually they all have it) and apply it to your code. Or if there is 'reinit' method you can skip destroy and just reinit gallery after html appending.

If you want the image to open automatically on page load, you can accomplish it by adding an id attribute to the img element & a click event to it like so:

HTML: