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

**darcelV** · 14/09/2018, 10h54

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();
    }  
  }
 
};

**ProgElecT** · 14/09/2018, 11h23

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é.

**darcelV** · 14/09/2018, 15h00

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.

Invité · 14/09/2018, 15h19

Bonjour,

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 ?

**darcelV** · 14/09/2018, 15h49

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 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
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>

Invité · 14/09/2018, 16h11

Vu.

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

Code JavaScript :

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

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 ??

**darcelV** · 14/09/2018, 16h35

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

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

JavaScript

Discussions similaires

Partager

Partager