Ajout de contenu HTML / Element.innerHTML

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

En gros, j'ai sur un fichier PHP :

<section class="main__player player-inactive player-on more-active" id="player-content">
    <video controls preload="metadata" class="main__player-video" id="player-video">
        <source src="/bplay/libs/upload/video/serie/video-serie-ep-1.mp4" type="video/mp4"></source>
    </video>
</section>

Donc, en JS je récupère l'ID de la balise section ainsi que la valeur de la source de la vidéo :

var player = document.querySelector('#player-content')
var video = player.querySelector('#player-video')
var source = video.currentSrc

Par la suite j'ajoute toute la structure HTML de mon système de player vidéo avec Element.innerHTML :

player.innerHTML = '<main class="player__center">'
            + '<video controls preload="metadata" class="main__player-video" id="player-video">'
              + '<source src="' + source + '" type="video/mp4"></source>'
            + '</video>'

            + '<main class="player__edt" id="player-edt">'
              + '<div class="toolbar__volume">'
            + '<div class="toolbar__volume-progress">'
              + '<div class="" style="height: 100%" id="vol-progress"></div>'
            + '</div>'
            + '<span class="volume__percent" id="vol-percent">100%</span>'
            + '<button type="button" class="toolbar__tool volume" id="vol-up"><i class="material-icons">volume_up</i></button>'
            + '<button type="button" class="toolbar__tool volume" id="vol-down"><i class="material-icons">volume_down</i></button>'
              + '</div>'

              + '<section class="player__toolbar" id="player-toolbar">'
            + '<div class="toolbar__progress">'
              + '<div class="toolbar__progress-burfed" id="burfed" style="width: 0%;"></div>'
              + '<div class="toolbar__progress-played" id="played" style="width: 0%;"></div>'
            + '</div>'

            + '<div class="player__toolbar-tools">'
              + '<button type="button" class="toolbar__tool large" id="play"><i class="material-icons">play_arrow</i></button>'
              + '<button type="button" class="toolbar__tool large" style="display: none; pointer-events: none;" id="pause"><i class="material-icons">pause</i></button>'
              + '<button type="button" class="toolbar__tool volume sound" id="sound"><i class="material-icons">volume_up</i></button>'
              + '<button type="button" class="toolbar__tool volume mute" id="mute" style="display: none; pointer-events: none;"><i class="material-icons">volume_off</i></button>'
              + '<button type="button" class="toolbar__tool next" id="next"><i class="material-icons">skip_next</i></button>'
              + '<button type="button" class="toolbar__tool fullscreen" id="fullscreen" style="display: none;"><i class="material-icons">more_vert</i></button>'

              + '<div class="toolbar__timer">'
                + '<span id="current-time">00:00</span>'
                + '<span id="total-time">00:00</span>'
              + '</div>'
            + '</div>
              + '</section>'
            + '</main>'
          + '</main>'

Cette structure est stylisée en CSS.

Ce que j'obtiens

Le problème, c'est que les balises ne sont pas créer, et je ne comprend pas pourquoi ! Alors... si vous savez !