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 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
<!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 css : 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
#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 : 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
 
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();
    }  
  }
 
};