title: Glightbox - click inside video container to close - not just outer container overlay or 'x' close button?
body: <p>I'm using Glightbox for a single video lightbox.</p>
  <p>On desktop I want it to work so that one click on the thumbnail opens the lightbox.
  It plays automatically without controls as desired.</p>
  <p>I need a close-on-click to work on the video container itself, and not just the more usual 'click close(x) icon' or 'click on the overlay outside the content'.</p>
  <p>This is because the video container will play full-window on both desktop and mobile. I also want my custom cursor to display the 'exit' button over the content (just dekstop).</p>
  <p>Relative JS noob, but I've managed to cobble together something that does all this on desktop, using a 'removeEventListener function. It fires the 'close' end of the function twice for some reason, although resets the ability to open the video again via a thumbnail click.</p>
  <p>On mobile however, it requires two clicks to function and that's not ideal in terms of UI, especially as I'll be turning off the custom cursor on devices.</p>
  <p>I believe it would be better to use the close method in the Glightbox API, but the stated <code>lightbox.close()</code> doesn't seem to work for me for some reason, when I've tried it in place of my sketchy function forcing the close icon-click ('x') to fire when a container is clicked.</p>
  <p>I'm not sure why this close function doesn't work?
  Played about with different target layers and pointer-event settings but no joy.</p>
  <p>Either way, I'd like to streamline all this so that it works on both desktop and mobile, with one click to open the video (autoplay) and one click (on inner container) to close, then thumbnail ready for open-click again.</p>
  <p>Hope all that makes sense? Huge thanks in advance for any help!</p>
  <p>Here's my existing code attempt:</p>
  <pre><code>player.on(&quot;play&quot;, (event) =&gt; {
        console.log(&quot;Started play&quot;);
        document.getElementsByClassName(&quot;glightbox3&quot;);
  
        document.addEventListener(&quot;click&quot;, myFunction);
  
        function myFunction() {
          document.getElementsByClassName(&quot;glightbox3&quot;);
          lightbox.close();
          document.querySelector(&quot;.gclose&quot;).click();
          console.log(&quot;CLOSED&quot;);
          document.removeEventListener(&quot;click&quot;, myFunction, false);
          console.log(&quot;gclose CLICK REMOVED &gt; RESET&quot;);
        }
      });
  </code></pre>
  <p>Full codepen: <a href="https://codepen.io/matt-rudd/pen/ExEoPdv" rel="nofollow noreferrer">https://codepen.io/matt-rudd/pen/ExEoPdv</a></p>