Couleur d'un header en fonction d'une video youtube

Version imprimable

Bonjour,
je cherche à faire un petit script JS, qui change la couleur du Header en fonction d'une video youtube. J'ai deux contraintes, je ne peux pas toucher au Iframe dans l'index et le script doit être dans un fichier script.js.
Mon script marche quand il est inclus dans la page index.html, mais ca bloque des que je le mets dans un fichier script.js.
J'ai fait de multiples recherches mais je n'ai pas encore trouvé de solution donc si vous avez une idée/une piste je suis preneur.

merci d'avance :) bonne journée

Voice mon index.html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
 
<html>
<head>
   <title>header youTube</title>
   <link href="style.css" rel="stylesheet">
   <script src="script.js"></script>
</head>
 
<body>
  <div id="header">
    <h1>test header</h1>
  </div>
  <iframe class="fl-bg-video-player" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/8UtdtfHNWmw?controls=0&showinfo=0&rel=0&start=0&enablejsapi=1" id="widget2" kwframeid="1" style="width: 1905px; height: 1071.56px;"></iframe>
</body>
</html>

mon style.css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#header
{
  height : 100px;
  width: 100%;
  background-color: rgba(255,255,2555,0.5);
  position: fixed;
  top : 0px;
  left: 0px;
  z-index: 1000;
}
 
#header h1
{
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
}
 
iframe
{
  position: absolute;
}

et mon script.js :

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
 
window.onload =
function()
{
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
  var player;
  function onYouTubeIframeAPIReady()
  {
    player = new YT.Player('widget2', {
         events: {
             'onStateChange': onPlayerStateChange
           }
         });
  }
 
  function changeBackGroundColor ()
  {
    console.log("video is playing");
    setTimeout(function()
         {
             document.getElementById('header').style.backgroundColor="rgba(0,0,0,0)";
         }, 8924);
    setTimeout(function()
        {
            document.getElementById('header').style.backgroundColor="rgba(255,255,255,0.5)";
        }, 12798);
    setTimeout(function()
        {
          document.getElementById('header').style.backgroundColor="rgba(0,0,0,0)";
        }, 23462);
    setTimeout(function()
         {
             document.getElementById('header').style.backgroundColor="rgba(255,255,255,0.5)";
         },27336);
    setTimeout(function()
        {
            document.getElementById('header').style.backgroundColor="rgba(0,0,0,0)";
        }, 41336);
    setTimeout(function()
        {
          document.getElementById('header').style.backgroundColor="rgba(255,255,255,0.5)";
        }, 46672);
  }
 
  function onPlayerStateChange(event)
  {
    if (event.data == YT.PlayerState.PLAYING)
    {
      changeBackGroundColor();
    }  
  }
 
};

14/09/2018, 11h23
ProgElecT

Salut

La première chose à faire est de vérifier si le fichier script.js est vraiment chargé.
Un F12 dans le navigateur ouvre le debugeur, dans l'onglet Console, tu auras un message d'erreur si le fichier n'a pas été chargé.
14/09/2018, 15h00
darcelV

Bonjour,
Merci pour votre aide :)
oui le script est bien chargé, il n'y a pas d'erreur et quand je rajoute un console.log ce dernier s'éxécute correctement.
14/09/2018, 15h19
Invité

Bonjour,

Citation:

Envoyé par darcelV

...Mon script marche quand il est inclus dans la page index.html, mais ca bloque des que je le mets dans un fichier script.js....

1- Montre-nous le "code qui marche".

2- je suppose que tu as suivi ce tuto : YouTube - YouTube API iFrame ?

Je souhaite que le Header devienne transparent quand il y a un arrière plan monochrome dans la video.
Pour cela je détecte le lancement de la vidéo et lance un timer.

Oui, c'est d'ailleurs a cette endroit que j'ai trouvé le IFrame Player API.

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
 
<html>
<head>
   <title>header youTube</title>
   <style>
   #header
   {
     height : 100px;
     width: 100%;
     background-color: rgba(255,255,2555,0.5);
     position: fixed;
     top : 0px;
     left: 0px;
     z-index: 1000;
   }
 
   #header h1
   {
   text-align: center;
   text-transform: uppercase;
   font-weight: bold;
   }
 
   iframe
   {
     position: absolute;
   }
   </style>
</head>
 
<body>
  <div id="header">
    <h1>test header</h1>
  </div>
  <iframe class="fl-bg-video-player" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/8UtdtfHNWmw?controls=0&showinfo=0&rel=0&start=0&enablejsapi=1" id="widget2" kwframeid="1" style="width: 1905px; height: 1071.56px;"></iframe>
 
<script>
 
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
var player;
function onYouTubeIframeAPIReady()
{
  player = new YT.Player('widget2', {
       events: {
           'onStateChange': onPlayerStateChange
         }
       });
}
 
function changeBackGroundColor ()
{
  console.log("video is playing");
  setTimeout(function()
       {
           document.getElementById('header').style.backgroundColor="rgba(0,0,0,0)";
       }, 8924);
  setTimeout(function()
      {
          document.getElementById('header').style.backgroundColor="rgba(255,255,255,0.5)";
      }, 12798);
  setTimeout(function()
      {
        document.getElementById('header').style.backgroundColor="rgba(0,0,0,0)";
      }, 23462);
  setTimeout(function()
       {
           document.getElementById('header').style.backgroundColor="rgba(255,255,255,0.5)";
       },27336);
  setTimeout(function()
      {
          document.getElementById('header').style.backgroundColor="rgba(0,0,0,0)";
      }, 41336);
  setTimeout(function()
      {
        document.getElementById('header').style.backgroundColor="rgba(255,255,255,0.5)";
      }, 46672);
}
 
function onPlayerStateChange(event)
{
  if (event.data == YT.PlayerState.PLAYING)
  {
    changeBackGroundColor();
  }
}
</script>
</body>
</html>

Vu.

Il faut fermer le window.onload = function() AVANT les fonctions (avant var player;, pas à la fin) :
Code:

1 2 3 4 5 6 7 8 9 10 11 window.onload = function() { document.getElementById('widget2').src="https://www.youtube.com/embed/8UtdtfHNWmw?controls=0&showinfo=0&rel=0&start=0&enablejsapi=1"; var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); }; var player; ...
Autrement dit : définir les fonctions EN DEHORS du window.onload.

REMARQUE : ce window.onload est LA SEULE CHOSE que tu as modifiée entre le "JS interne" et le "JS dans un fichier externe".

Ça ne t'a pas mis la puce à l'oreille ?? 8O

14/09/2018, 16h35
darcelV

En effet, ca marche, merci beaucoup !

Si, je me doutais que cela venait de cet ajout mais je n'aurai pas eu l'idée de fermer le window.onload = function() AVANT les fonctions.
Je note ;)

bonne fin de journée