Help with HTML5 video on React

[harveryang]

Can someone help on how to properly load HTML5 video in react?
In my test, I use lightGallery v2.6.1 with videojs enabled
<LightGallery plugins={[lgVideo, lgZoom]} elementClassNames="custom-class-name" onInit={onInit} videojs={true} videojsOptions={{ muted: false }} > {getItems()} </LightGallery>

and item tag like this
<a key={item.id} data-lg-size={item.size} className="gallery-item" data-video={item.src} > <img style={{ maxWidth: '280px' }} className="img-responsive" src={item.thumb} /> </a>

However, when click on the thumbnail, it throws "Opps....failed to load the content"

https://stackblitz.com/edit/lightgallery-react-update-slides-tagyh3?file=index.tsx,Hello.tsx

BTW, I did the same test in v2.4.0 and it works fine.

[sachinchoolur]

Hey @harveryang,

I found a few issues with your code

1. a typo in the getItems function. Type should be video instead of vidoe

return items.map((item) => {
      return item.type == 'video' ? (

2. You need to use double quotes in the video src JSON
3. You need to include videoJs JavaScript and CSS files. It is vimoe js currently

Here is the working link - https://stackblitz.com/edit/lightgallery-react-update-slides-1euqhi?file=index.tsx,index.html

[harveryang]

@sachinchoolur Thank you so much for pointing out my issues. It's working correctly now. (https://stackblitz.com/edit/lightgallery-react-update-slides-tagyh3?file=index.tsx,index.html)

so vimeo js supports data-src but video js needs to use data-video