Solution js fiddle !? (Plusieurs vidéos YT sur une seule page)

**cyberbelette** · 29/03/2018, 13h18

Bonjour,
J'ai trouvé un script génial sur stackoverflow pour mettre en pause une vidéo Youtube quand on en lance une autre (histoire d'éviter la cacophonie) : ça marche à la perfection sur l'exemple js fiddle, mais plus du tout quand on copie le code sur une nouvelle page html

Alors j'ai ajouté les "dépendances" : l'appel de jquery 2.0.2 dans le head, et aussi une fonction onLoad JQ mais rien n'y fait…
Si près du but, c'est désespérant !
Ce serait pourtant la solution idéale pour un site WP où on ne peut pas mettre d'identifiant à l'iframe de la vidéo sous peine que tout soit écrasé par l'utilisateur à la mise à jour suivante…
Voilà l'idée :
http://jsfiddle.net/fyb7fyw1/
Que manque-t-il pour que ça fonctionne chez moi ?

**mathieu** · 29/03/2018, 13h57

montrez nous le code HTML de la page qui ne fonctionne pas.

**cyberbelette** · 29/03/2018, 14h39

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>multi vidéos YouTube</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.2.js"></script>
<script type="text/javascript">
$(window).load(function(){
});
</script>
</head>
 
<body>
 
<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
function onYouTubeIframeAPIReady() {
    var $ = jQuery;
    var players = [];
    $('iframe').filter(function(){return this.src.indexOf('http://www.youtube.com/') == 0}).each( function (k, v) {
        if (!this.id) { this.id='embeddedvideoiframe' + k }
        players.push(new YT.Player(this.id, {
            events: {
                'onStateChange': function(event) {
                    if (event.data == YT.PlayerState.PLAYING) {
                        $.each(players, function(k, v) {
                            if (this.getPlayerState() == YT.PlayerState.PLAYING && this.getIframe().id != event.target.getIframe().id) { 
                                this.pauseVideo();
                            }
                        });
                    }
                }
            }
        }))
    });
}
</script>
 
<iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="300" height="200" src="http://www.youtube.com/embed/gbug3zTm3Ws?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net"></iframe>
<br/>
 
<iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="300" height="200" src="http://www.youtube.com/embed/JFBUJ6kNl28?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net"></iframe>
<br/>
 
<iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="300" height="200" src="http://www.youtube.com/embed/pUjE9H8QlA4?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net"></iframe>
<br/>
 
<iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="300" height="200" src="http://www.youtube.com/embed/saz1vsk69KI?enablejsapi=1&amp;origin=http%3A%2F%2Ffiddle.jshell.net"></iframe>
 
</body>
</html>

**mathieu** · 29/03/2018, 16h48

dans les URL des iframes, vous devez mettre le nom de votre serveur pour l'argument "origin".

**cyberbelette** · 29/03/2018, 16h59

Merci de bien vouloir vous pencher sur mon problème

!
Je viens de voir cet ajout à la fin de l'adresse de chaque vidéo. Mais si je l'enlève sur jsfiddle, c à d si je m'arrête après enablejsapi=1 ça fonctionne toujours sur jsfiddle et toujours pas chez moi…
D'ailleurs l'exemple jsfiddle.net/fyb7fyw1/52/ cité plus haut (que j'ai aussi testé en local) n'utilise pas origin.

**cyberbelette** · 29/03/2018, 18h27

Coucou tout le monde,
j'ai trouvé la réponse : dans le code vers l'api youtube il manquait "https:" devant l'adresse et du coup ça ne fonctionnait pas chez moi en local…
C'est trop bête !!!

Si au moins ça crée une référence en français pour ce pb que je n'ai vu traité qu'en anglais sur Google… Ce sera toujours ça de gagné pour ceux qui suivront.

P.S. Et merci à Mathieu d'avoir donné un peu de son temps pour m'aider… !

**mathieu** · 29/03/2018, 18h34

ah oui en retirant cet argument, cela fonctionne chez moi.
voilà ce j'ai testé :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>multi vidéos YouTube</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.2.js"></script>
<script type="text/javascript">
$(window).load(function(){
});
</script>
</head>
 
<body>
 
<script>
console.clear();
 
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
function onYouTubeIframeAPIReady() {
        
    var $ = jQuery;
    var players = [];
    $('iframe').filter(function(){return this.src.indexOf('http://www.youtube.com/') == 0}).each( function (k, v) {
        if (!this.id) { this.id='embeddedvideoiframe' + k }
        players.push(new YT.Player(this.id, {
            events: {
                'onStateChange': function(event) {
                    if (event.data == YT.PlayerState.PLAYING) {
                        $.each(players, function(k, v) {
                            if (this.getPlayerState() == YT.PlayerState.PLAYING && this.getIframe().id != event.target.getIframe().id) { 
                                this.pauseVideo();
                            }
                        });
                    }
                }
            }
        }))
    });
    
}
</script>
 
<iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="300" height="200" 
src="http://www.youtube.com/embed/gbug3zTm3Ws?enablejsapi=1"></iframe>
<br/>
 
<iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="300" height="200" 
src="http://www.youtube.com/embed/TWweaQOL-iA?enablejsapi=1"></iframe>
<br/>
 
<iframe frameborder="0" allowfullscreen="1" title="YouTube video player" width="300" height="200" 
src="http://www.youtube.com/embed/WGM0wf9V6Wo?enablejsapi=1"></iframe>
 
</body>
</html>

**NoSmoking** · 30/03/2018, 09h39

Bonjour,
effectivement on voit de plus en plus d'url sans protocole dans les sources, absence de http: ou https:, pour éviter les modifications au passage de http vers https.

En l'absence de protocole c'est celui de la page qui est utilisé, si tu fais tes test en local c'est file: qui est utilisé, donc le script n'est pas trouvé.

**cyberbelette** · 30/03/2018, 12h37

Ah oui… Je comprends mieux pourquoi sur certains sites on voit subitement apparaitre un avertissement du navigateur du type "attention, vos données ne sont plus sécurisées" alors qu'on a juste changé de page sur un même site…
L'appel de fichiers js externes pourrait déclencher ce genre d'alerte ?

**NoSmoking** · 03/04/2018, 12h29

L'appel de fichiers js externes pourrait déclencher ce genre d'alerte ?

si le fichier est inclus via une balise <script>, la console te l'indiquera, un message comme « Failed to load resource: net::ERR_FILE_NOT_FOUND » devrait apparaître, mais comme tu passes par une insertion via un appendChild il te faut effectivement vérifier que le script est bien pris en compte, un indice est qu'il ne fonctionne pas par exemple, mais c'est des fois bien plus vicieux.

Solution js fiddle !? (Plusieurs vidéos YT sur une seule page)

JavaScript

Discussions similaires

Partager

Partager