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>

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager