JavaScript event onclick bei Schließen einer Lightbox

[Rapunzelino]

Auf meiner Website biete ich Videos an, die immer in Lightboxen abgespielt werden. Die Lightbox-Funktion verwirkliche ich mit Ui-Kit und der Klasse uk-lightbox. Das Video startet automatisch nachdem sich die Lightbox geöffnet hat. Diesen Vorgang kann ich leicht erfassen mit:
<div uk-lightbox="animation: fade" video-autoplay="" onclick="matomoeventtracking('video', 'playing', 'Video: mein gutes Video');"> <a href="images/video/test/interview.mp4" title="Video: mein gutes Video"> <img src="images/grafik/play-circle-white-150.png" alt="" /> </a> </div>


Die Lightbox kann geschlossen werden durch Klick auf einen Button oder einen Klick irgendwo außerhalb des Content-Bereichs der Lightbox. Genau diesen Click möchte ich dazu nutzen, Matomo mitzuteilen, dass das Abspielen des Videos beendet wurde.

Die Lightbox wird aber durch Javascript usw. geöffnet und so sehe ich im HTML der Webseite keinen div-Container, in den ich ein event "onclick" paltzieren könnte.

Leider scheidet das Video-Tag für die events (playing und ended) aus, da es in der Funktion von Ui-Kit Lightbox nicht verwendet wird.

Wo kann ich also den Codeschnippsel onclick="matomoeventtracking('video', 'ended', 'Video: mein gutes Video')
einfügen?

 

[netzgestaltung]

Also zunächst wird du mit Javascript in HTML Attributen nicht weit hüpfen. Ansonsten ist es so, dass der Button zum schließen und der Code, der ihn schließt hier fehlt (vermutlich der nachteil solcher libs). Dort gibt es einen "onclick" event handler, da kannst du das "dazu" schreiben. Es gibt auch die möglichkeit namespaces für events zu vergeben, dann kannst du in verteilten scripten auf die events zugreifen.

Da der Schließmechanismus von der UI-Lib bereit gestellt wird, sollte in deren Doku die Antwort zu finden sein.

Ergänzung (5. Juli 2023)

Also ein kurzer Ansatz:

<div uk-lightbox="animation: fade" video-autoplay="">
  <a href="images/video/test/interview.mp4" class="video-opener" title="Video: mein gutes Video">
    <img src="images/grafik/play-circle-white-150.png" alt="" />
  </a>
</div>
<script type="text/javascript">
;(function(){
  document.querySelectorAll('.video-opener').forEach(function(video_opener){
    video_opener.addEventListener('click', function(event){
      matomoeventtracking('video', 'playing', this.title);
    });
  });
}());
</script>

Das ist quasi ein startpunkt, der genau das gleiche wie bisher macht, wo du aber einfach weiteren Code anfügen kannst. Wenn du dieses UI-KIT und die Doku der Lightbox da verlinkst schau ich auch mal rein und weiß dann ggf mehr.