sachinchoolur / lightGallery

A customizable, modular, responsive, lightbox gallery plugin.

Home Page:https://www.lightgalleryjs.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Customize videojs player in lightgallery

darmon77 opened this issue · comments

Description

I am trying to customize the videojs player
According to the videojs documentation to customize the player you should do the following https://videojs.com/getting-started/#home-page-themes.
Is there any configuration in the json file to call the theme class ?
following the documentation of videojs in its demos the expected results are obtained, when applying the class in my html file for lightgallery I do not obtain the expected results.
Any suggestion that can help to solve my problem thank you very much

Steps to reproduce

<div class="gallery-container gallery-b1" id="exmaple">
 <a class=" vjs-theme-fantasy" data-video='{"source": [{"src":"https://vjs.zencdn.net/v/oceans.mp4", "type":"video/mp4"}], "attributes": {"preload": false,  "controls": false, "muted": true, "loop": true, "autoplay": true}}'
              >
                  <img class="marca-de-agua gallery-item " src="#" alt="example-alt"
                  </a>
</div>

###Config javascript

llightGallery(document.getElementById('example'), {
    plugins: [lgVideo],
    videojs: true,
    videojsOptions: {
        muted: true,
    },
});

Sample HTML markup videojs

`<!-- In the head of your document with your other CSS includes... -->
<!-- Video.js base CSS -->
<link href="https://unpkg.com/video.js@7/dist/video-js.min.css"rel="stylesheet"/>
<!-- City -->
<link href="https://unpkg.com/@videojs/themes@1/dist/city/index.css"  rel="stylesheet" />
<!-- Then, in the player -->
<video class="video-js vjs-theme-city" `...></video>`

Thank you for reporting this issue.
Yes, I'll add an option to pass a custom theme class name

Thanks for your answer.

To use a class for custom theme you have to do like this. Doc addClass
Sample HTML markup

<link href="https://unpkg.com/video.js@7/dist/video-js.min.css" target="_blank" rel="nofollow"  rel="stylesheet"/>
<link  href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet"/>

<div class="gallery-container gallery-b1" id="exmaple">
 <a class=" vjs-theme-fantasy" data-video='{"source": [{"src":"https://vjs.zencdn.net/v/oceans.mp4", "type":"video/mp4"}], "attributes": {"preload": false,  "controls": false, "muted": true, "loop": true, "autoplay": true}}'
              >
                  <img class="marca-de-agua gallery-item " src="#" alt="example-alt"
                  </a>
</div>

Sample JS markup
l```
lightGallery(document.getElementById('example'), {
plugins: [lgVideo],
videojs: true,
videojsOptions: {
muted: true,
addClass: "vjs-theme-fantasy",
},
});

I've added an option to pass the theme className called videojsTheme

Usage

lightGallery(document.getElementById('example'), {
  videojsTheme: 'vjs-theme-fantasy',
  plugins: [lgVideo],
  videojs: true,
  videojsOptions: {
    muted: true,
  },
});

Please use version 2.5.0-beta.2
https://github.com/sachinchoolur/lightGallery/releases/tag/2.5.0-beta.2