Discussion :

[bruntho]

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.

[jreaux62]

Bonjour,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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.

[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

[jreaux62]

Mathieu... ??

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="js-XXX" class="uk-flex-top uk-modal" uk-modal="">...</div> <!-- CETTE MODALE est masquée -->
<div id="js-YYY" class="uk-flex-top uk-modal" uk-modal="">...</div> <!-- CETTE MODALE est masquée -->
<div id="js-ZZZ" class="uk-flex-top uk-modal uk-flex uk-open="">...</div> <!-- CETTE MODALE EST OUVERTE -->
...

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.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[jreaux62]

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

[bruntho]

Je suppose que c'est ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[bruntho]

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
      });
    });
});

[jreaux62]

Essaie plutôt :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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 !