Galleria video not showing video icon in mobile

Question

In my drupal commerce website we are using Galleria for product slideshow. According to recent requirement we needed a (youtube) video to be added as the second item in the slideshow. I achieved that by using splice function as mentioned here:

(function($){
  Galleria.ready(function(options) {  

    var gallery = this;
    gallery.splice(1, 0, { video: 'https://www.youtube.com/watch?v=1wNzzCWWEdg' });
      });

})(jQuery);

As shown below, this is working totally fine in laptop/desktop.

In mobile phones, the video is getting added properly in second position, but it has two issues.

1. The video icon at the center of image is missing.

2. User has to click twice to play the video. When clicked, first it loads the actual youtube video and then user has to click again to play the video.

What I have checked so far to fix the issue :

a. Through "Inspect Element", I found that there is this element which is being appended in DOM in desktop but not in DOM in mobile.

<div class="galleria-videoicon">
  <i></i>
</div>

b. In console, following error(TypeError: img is undefined) shows for mobile devices.

I tried looking into the galleria.js file at line number 3069 as shown in error. I could not figure out much here.

How do I take next step to solve it? Any tips/guidance much appreciated. Thanks in advance.

Update:

I have also tried adding Video icon to gallery elements explicitly for mobile devices.

   //For Mobile Devices
    Galleria.on('image', function(e) {
          $(e.imageTarget).after("DOM_FOR_ICON");            
    });     

But this(Or any other JS code) does not work for first two elements on Gallery. It works only on third and further elements.

Answer 1

Based on what you showed, it looks to me that the code on line 3062 is doing a silent fail to undefined

On line 3064, try adding these lines:

console.log(img);
console.log(self);
console.log(self._controls);
console.log(self._controls.slides);
console.log(self._controls.slides[loadme])

Or if you have a debugger on your editor/IDE, it would be better to add a debugging breakpoint on line 3064 instead

What does that gives you in the console? If you get anything undefined here, that could be the culprit. You can go backward up the stack from there to pinpoint it further with more precision...