Script qui fonctionne mais pas exactement comme prévu

Version imprimable

22/09/2021, 10h21
bruntho

Script qui fonctionne mais pas exactement comme prévu

Bonjour à tous,

Je tourne en boucle sur le problème suivant : sur un site internet, j'ai des vidéos qui sont chargées dans des modals. Tout fonctionne à peu près comme prévu, mais il y a plusieurs vidéos sur la page et les vidéos ne s'arrêtent pas si on ferme la modal. J'ai trouvé un script qui fonctionne plutôt bien, mais j'ai un problème sur le déclencheur. Pour résumer, j'aimerais que quand on passe au dessus de la croix pour fermer la modal, la vidéo s'arrête.

Si je crée moi-même un bouton en HTML (parfaitement identique à celui qui ferme la modal), la vidéo s'arrête comme il faut.
Par contre, quand on passe au dessus du "vrai" bouton de la modal, mon script ne se déclenche pas.

On peut voir le cas réel sur la page suivante : https://voyages.nuitchercheurs.eu/europe (il faut cliquer sur le sous-marin jaune pour voir la modal dans laquelle il y a mon bouton qui fonctionne)

J'ai beau tourner dans tous les sens, je n'arrive pas à comprendre.

Est ce que quelqu'un aurait une piste ?

merci d'avance,

Bruntho.
22/09/2021, 13h17
jreaux62
Bonjour,

A chaque clic sur une image, tu crées une nouvelle modale :

Code:

<div id="js-XXXX" class="uk-flex-top uk-modal" uk-modal="">...

On se retrouve avec autant de modales que d'images cliquées.

Au clic sur le bouton (".uk-close") ou en dehors (".uk-modal-close-outside") :
- il faut supprimer la/toutes modale/s (".uk-modal").
- pas juste la masquer.
Ainsi, il n'y a qu'une seule modale à la fois.
22/09/2021, 14h59
bruntho

Merci de ta réponse Mathieu.

Mais finalement, peu importe que j'ouvre plusieurs modals à la fois (en l'occurence, ce sera rare, vu qu'elle prend quasi tout l'écran, donc obligé de fermer une pour ouvrir l'autre).

C'est surtout le coup de la vidéo qui ne s'arrête pas. Elle s'arrête si on fait un hover sur la croix que j'ajoute manuellement dans le code de la modal. Mais elle ne s'arrête pas si on fait un hover sur la croix générée automatiquement par la modal. Et j'arrive pas à comprendre pourquoi.

Ou alors, je n'ai pas compris ta réponse :)

Merci en tout cas

Mathieu... ?? 8O

Tu n'as pas compris :
à chaque clic sur une image, c'est le code HTML d'une NOUVELLE modale qui est créé :
Code:

1 2 3 4 <div id="js-XXX" class="uk-flex-top uk-modal" uk-modal="">...</div>  <div id="js-YYY" class="uk-flex-top uk-modal" uk-modal="">...</div>  <div id="js-ZZZ" class="uk-flex-top uk-modal uk-flex uk-open="">...</div>  ...
C'est pour ça que les vidéos continuent, puisqu'elles sont toujours là, DANS LE CODE ! (mais masquées à l'écran)

Il faut supprimer ces modales, au lieu de les masquer.

Pour cela, il faut savoir quel est le script (JS ?) qui s'occupe de "fermer" la modale.

22/09/2021, 18h34
bruntho
Désolé, jreaux62, j'ai mal lu :)

En fait, je ne cherche pas à la fermer cette modal. Le masquage fonctionne bien pour moi (et je ne suis pas sûr que si je la ferme, mon script va la réouvrir). Ce qui ne fonctionne pas, c'est le déclenchement du script qui permet d'arrêter la vidéo.
Code:

1 2 3 4 5 6 7 function() { jQuery('.youtube-iframe').each(function(index) { jQuery(this).attr('src', jQuery(this).attr('src')); return false; }); }
Il fonctionne quand on passe au dessus du bouton créé dans le corps de la page (je ne l'ai fait que pour le sous-marin jaune), mais pas quand on passe au dessus de la croix de fermeture de la modal, il ne s'exécute pas. J'ai même mis une alert dedans pour tester, je vois l'alert après un hover sur mon bouton croix manuel, mais pas celui qui est créé par la modal en haut à droite.
22/09/2021, 19h20
jreaux62

MONTRE le script (JS ?) qui s'occupe de "fermer" la modale.

Je suppose que c'est ça

Code:

1
2
3
function(e) {
  return void 0 === d || e && d.event.triggered === e.type ? void 0 : d.event.dispatch.apply(c.elem, arguments)
}

Citation:

Envoyé par jreaux62

MONTRE le script (JS ?) qui s'occupe de "fermer" la modale.

Et voici le script qui arrête la vidéo

Code:

1
2
3
4
5
6
7
8
9
10
jQuery( document ).ready(function() {
    jQuery('iframe[src*="https://www.youtube.com/embed/"]').addClass("youtube-iframe");
 
jQuery(".uk-close").mouseover(function() {
      jQuery('.youtube-iframe').each(function(index) {
       jQuery(this).attr('src', jQuery(this).attr('src'));
        return false;
      });
    });
});

Essaie plutôt :
Code:

1 2 3 4 5 6 7 jQuery( document ).ready(function() { jQuery('body').on('click', '.uk-close, :not(.uk-container)', function() { // clic sur bouton ou hors modale jQuery('body').find('.uk-modal iframe, .uk-modal audio, .uk-modal video source').each(function() { jQuery(this).attr('src', jQuery(this).attr('src')); // iframe, audio, video source : reset src }); }); });
+ tu peux supprimer le bouton dans la modale du "sous-marin jaune" ;)

N.B. En plus de la balise <iframe>, j'ai ajouté :

la balise <audio> (vu en "Afrique", clic sur le wagon)
la balise <video>, sachant que le src s'applique aux balises <source>

24/09/2021, 08h11
bruntho

Alors là... les bras m'en tombent !!!

C'est génial ! Ça marche ! Et en plus, tu as ajouté le support des autres médias. La journée commence bien !
Merci ! Merci ! Merci !