title: Trying to call enumerateDevices from a frame without correct 'allow' attribute
body: <h3>Question:</h3>
  
  <p>What is causing the below errors and how do I fix it?</p>
  
  <p>I found this, but can't read Japanese:</p>
  
  <p><a href="https://bisyokuden.com/archives/433" rel="nofollow noreferrer">https://bisyokuden.com/archives/433</a></p>
  
  <p>might have something to do with webkit.</p>
  
  <p><a href="https://github.com/WebKit/webkit/blob/master/LayoutTests/http/tests/media/media-stream/enumerate-devices-iframe-allow-attribute-expected.txt" rel="nofollow noreferrer">https://github.com/WebKit/webkit/blob/master/LayoutTests/http/tests/media/media-stream/enumerate-devices-iframe-allow-attribute-expected.txt</a></p>
  
  <h3>Errors in Safari, but not Chrome:</h3>
  
  <pre><code>[Error] Trying to call enumerateDevices from a frame without correct 'allow' attribute.
      (anonymous function) (Anonymous Script 1 (line 1))
      MN (Anonymous Script 2 (line 2:7482))
      (anonymous function) (Anonymous Script 2 (line 2:10663))
      (anonymous function) (Anonymous Script 2 (line 2:6198))
      Wk (Anonymous Script 2 (line 2:5376))
      m (Anonymous Script 2 (line 2:6447))
      ut (Anonymous Script 2 (line 2:4204))
      f (Anonymous Script 2 (line 2:5151))
      (anonymous function) (Anonymous Script 2 (line 2:12020))
      (anonymous function) (Anonymous Script 2 (line 2:11961))
      zf (www-embed-player.js:427)
      (anonymous function) (www-embed-player.js:426:114)
      f (www-embed-player.js:400:114)
  
  [Error] Trying to call enumerateDevices from a frame without correct 'allow' attribute.
      (anonymous function) (Anonymous Script 1 (line 1))
      MN (Anonymous Script 3 (line 1:174))
      (anonymous function) (Anonymous Script 2 (line 2:10663))
      (anonymous function) (Anonymous Script 2 (line 2:6198))
      Wk (Anonymous Script 2 (line 2:5376))
      m (Anonymous Script 2 (line 2:6447))
      ut (Anonymous Script 2 (line 2:4204))
      f (Anonymous Script 2 (line 2:5151))
      (anonymous function) (Anonymous Script 2 (line 2:12020))
      (anonymous function) (Anonymous Script 2 (line 2:11961))
      Qo (base.js:967)
      (anonymous function) (base.js:4605:257)
      k (base.js:950:120)
  </code></pre>
  
  <h3>Javascript Helper (wrapper for YT IframeAPI)</h3>
  
  <pre><code>Helpers = window.Helpers || {};
  Helpers.Google = Helpers.Google || {};
  Helpers.Google.YT = Helpers.Google.YT || {};
  
  Helpers.Google.YT = {
  
     Player: class Player {
  
      constructor(element = 'ytplayer', options = { playerVars: { controls: 1 },
                                                    height: '390',
                                                    width: '640',
                                                    videoId: 'novideoid',
                                                    events: {
                                                    'onReady': onPlayerReady,
                                                    'onStateChange': onPlayerStateChange
                                                  }}, StubPlayerInstance = null ) {
  
        if (StubPlayerInstance == undefined) {
          this.player = new YT.Player(element, options);
        } else {
          this.player = StubPlayerInstance;
        }
      }
  
      loadVideoById($element) {
        var videoId = $element.data('video-id');
        var x = new String(videoId);
        this.player.loadVideoById(x);
      }
  
      init(modalId){
        const thatInstance = this;
        $(modalId).on('show.bs.modal', function(e) {
          thatInstance.loadVideoById($(e.relatedTarget));
        });  
        return this.player;    
      }
    }
  }
  
  var player;
  
  
  function onYouTubeIframeAPIReady() {
    player = new Helpers.Google.YT.Player().init('#video-modal');
  }
  
  function onPlayerReady(event) {
     $('.open-popup').click(function() {
       event.target.playVideo();
     });
     $('.close-popup').click(function(e) {
       player.stopVideo();
     });
   }
  
  function onPlayerStateChange(event) {
     if(event.data === 0) {           
       $('.close.close-popup').click();
     }
   }
  </code></pre>