title: youtube video in chrome extension content script
body: <p>I am trying to insert youtube videos with the iframe API in to an existing page with the help of a chrome extension content script. But I cannot get the <code>onYouTubeIframeAPIReady</code> to trigger.</p>
  
  <p><strong>manifest.json</strong></p>
  
  <pre><code>"content_scripts": [
          {
              "matches": ["http://*/*", "https://*/*", "file://*/*", "*://*/*"],
              "js": ["content-script.js"]
          }
      ],
  </code></pre>
  
  <p><strong>content-script.js</strong></p>
  
  <pre><code>const appEl = document.createElement('div');
  appEl.id = 'my-app';
  appEl.innerHTML = `&lt;div id="youtube-iframe"&gt;&lt;/div&gt;`;
  const bodyEl = document.querySelector('body');
  bodyEl.insertBefore(appEl, bodyEl.firstChild);
  
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  document.querySelector('body').appendChild(tag);
  window.onYouTubeIframeAPIReady = () =&gt; {
      this.player = new YT.Player('youtube-iframe', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
              'onReady': onPlayerReady,
          }
      });
  }
  
  function onPlayerReady(event) {
      console.log('player ready');
      event.target.playVideo();
  };
  </code></pre>
  
  <p>In a chrome-app I was able to make it work with a <code>webview</code> but this does not seem to be available in extensions.  </p>