YouTube + iPhone + Angular --> "undefined is not an object (evaluating 'this.elements.settings.tabs[e].querySelector')"

I'm a bit stuck with this bug and can't offer minimal reproducing example. Still hope you can help me.

We're using Plyr in our projects on Angular 5. And adding generated src dynamically, after sanitizing it:

[src]="generatedSafeVideoUrl"

or in the context:

<div #plyrPlayer
     class="plyr__video-embed">
  <iframe *ngIf="generatedSafeVideoUrl"
          [src]="generatedSafeVideoUrl"
          allowfullscreen
          allowtransparency>
  </iframe>
</div>

It works properly, but throws an error only on iPhones (Safari 11 and 10, Chrome Mobile 65): undefined is not an object (evaluating 'this.elements.settings.tabs[e].querySelector')

It is happening in this lines of Plyr (controls.js):

// Update the label
if (!utils.is.empty(value)) {
  const label = this.elements.settings.tabs[setting].querySelector(`.${this.config.classNames.menu.value}`);
  label.innerHTML = controls.getLabel.call(this, setting, value);
}

Strange, but if I type src as a constant, it works properly: src="http://youtube....."

Of course, iPhone uses its own player, but it is convenient still to use event hooks through Plyr:

this.player.on('play', () => {
  // ...
});

Suggestion (maybe not the best, but hotfix)

Add checking if this.elements.settings.tabs[setting] exists to controls.js:

// Update the label
if (this.elements.settings.tabs[setting] && !utils.is.empty(value)) {
    var label = this.elements.settings.tabs[setting].querySelector('.' + this.config.classNames.menu.value);
    label.innerHTML = controls.getLabel.call(this, setting, value);
}