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

Version imprimable

29/03/2018, 13h18
cyberbelette

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

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 :calim2:
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 ?
29/03/2018, 13h57
mathieu

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

Code:

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>

29/03/2018, 16h48
mathieu

dans les URL des iframes, vous devez mettre le nom de votre serveur pour l'argument "origin".
29/03/2018, 16h59
cyberbelette

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.
29/03/2018, 18h27
cyberbelette

mettre en pause une vidéo YouTube au démarrage d'une autre (plusieurs iframes YouTube sur une même page html)

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 !!! :rouleau:
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… !

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

Code:

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>

30/03/2018, 09h39
NoSmoking

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é.
30/03/2018, 12h37
cyberbelette

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 ?
03/04/2018, 12h29
NoSmoking

Citation:

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.