MusiKonzept Journal

<div class="embed-responsive embed-responsive-16by9">
    <div id="youtube-i-vVlKq22m8"></div>
  </div>
  <script>
    function createYouTubePlayer(player) {
      new YT.Player('youtube-' + player.identifier, {
          height: player.height,
          width: player.width,
          videoId: player.identifier,
      });
    }
    if (window.onYouTubePlayerAPIReady) {
      // This case covers when a youtube component has already been rendered on the page
      var player = {
        identifier: 'i-vVlKq22m8',
        height: '360',
        width: '640',
      };
      if (window.YT && window.YT.loaded) {
        // If the API is already successfully loaded, we can just instantiate a player immediately
        window.createYouTubePlayer(player);
      } else {
        // If the API is not yet loaded, we need to add a record to the list of players for the onYouTubePlayerAPIReady() call to instantiate
        players.push(player);
      }
    } else {
      // This case is for the FIRST video that is loaded on the page
      var tag = $('<script>').attr('src', 'https://www.youtube.com/player_api')
      $('head').append(tag)

var players = [
        {
          identifier: 'i-vVlKq22m8',
          height: '360',
          width: '640',
        }
      ];

// This function should only be defined once, and utilize the list of players
      function onYouTubePlayerAPIReady() {
        players.forEach(createYouTubePlayer);
      }
    }
  </script>