Prise de tête youtube-player

Panterofys
Javascript

Bonjour,

Je rencontre un problème lors de la mise en place d'une video youtube qui deverait démarrer dès le chargement de la page.
Cette video dois pouvoir être ajoutée dynamiquement.
C'est pourquoi dans mon backoffice, l'utilisateur à la possibilité d'injecter une video.
Ce qui donne en sortie dans le HTML : 

   <p class="container_video">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/SwST-tKdaiM?autoplay=1" frameborder="0"     allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </p>

Coté javascript je fais donc ceci : 

window.addEventListener('load', function () {
  let isTouchDevice = function () { return 'ontouchstart' in window || 'onmsgesturechange' in window }
  let isDesktop = window.innerWidth >= 1090 && !isTouchDevice()
  let container = document.querySelector('.container_video')
  if (isDesktop) {
    if (container) {
      new ChargeVideoEmbbeded(document.querySelector('iframe'))
    }
  } 
})

ma classe ChargeVideoEmbbeded : 

import YouTubePlayer from 'youtube-player'
class ChargeVideoEmbbeded {
  constructor (video) {
    if (video) {
      let youtubeParser = function (url) {
        var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/
        var match = url.match(regExp)
        return (match && match[7].length === 11) ? match[7] : false
      }
      let player
      this.video = video
      let containerVideo = document.createElement('div')
      containerVideo.setAttribute('id', 'player')
      let parentVideo = video.parentNode
      let stateNames = {
        '-1': 'unstarted',
        0: 'ended',
        1: 'playing',
        2: 'paused',
        3: 'buffering',
        5: 'video cued'
      }
      parentVideo.classList.add('wrap-video')
      parentVideo.appendChild(containerVideo)
      player = YouTubePlayer('player', {
        playerVars: {
          rel: 0,
          fs: 0,
          cc_load_policy: 0,
          modestbranding: 1,
          frameborder: 0
        }
      })
      player.loadVideoById(youtubeParser(video.getAttribute('src')))
      player.playVideo()
      player.on('stateChange', (event) => {
        if (!stateNames[event.data]) {
          throw new Error('Unknown state (' + event.data + ').')
        }
        console.log('State: ' + stateNames[event.data] + ' (' + event.data + ').')
        if (event.data === 0) {
          player.playVideo()
          video.remove()
        }
        if (event.data === -1) {
          player.playVideo()
          console.log(event)
          video.remove()
        }
        if (event.data === 1) {
          document.querySelector('.cover-video').classList.add('fade')
          document.querySelector('.loadingSpan').classList.add('not-visible')
          video.remove()
        }
      })
    }
  }
}
export default ChargeVideoEmbbeded

Et le problème c'est que la video de ne se lance pas la première fois, si j'actualise, hop ça fonctionne
je vide le cache du navigateur je recommence, ça ne fonctionne plus, j'actualise, pof ça refonctionne ...
ma seul piste est que ceci : 

        if (event.data === -1) {
          player.playVideo()
          console.log(event)
          video.remove()
        }

Renvoit en console : Object
alors que la deuxième j'ai bien directement l'évenement à savoir : {target: Y, data: -1}

Avez-vous une idée ?
La seul solution à laquelle j'ai pensé cela serait de faire un refresh de la page en javascript à la première arrivée mais bon pas top quoi.

Aucune réponse