title: Webview and iframe fail to show Youtube videos in a sandboxed iframe in Chrome packaged app
body: <p>I am developing a Chrome packaged app (not a legacy packaged app); my app needs to contain a sandboxed <code>iframe</code> (to run 3rd party HTML/JS code), in which I need to use a <code>webview</code> or an <code>iframe</code> to show a Youtube video. Neither works; I cannot play any Youtube videos. (The <code>webview</code> works, however, when used outside the sandboxed <code>iframe</code>.)</p>
  
  <p>Main HTML file looks like this:</p>
  
  <pre><code> &lt;iframe src="sandbox.html"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>The file <code>sandbox.html</code> is declared in <code>manifest.json</code>. It looks like this (I'm trying two alternative ways of playing a Youtube video):</p>
  
  <pre><code>&lt;webview width="420" height="315" src="http://www.youtube.com/embed/XGSy3_Czz8k"&gt;&lt;/webview&gt;
  &lt;iframe width="420" height="315" src="http://www.youtube.com/embed/XGSy3_Czz8k"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>When I run this app, the <code>webview</code> is an empty white rectangle. The <code>iframe</code>, on the other hand, contains a cover image and the Youtube player controls for the video.</p>
  
  <p>Firstly, why is the <code>webview</code> empty? The <code>webview</code> works in this app (plays video) as long as I use the <code>webview</code> <em>outside</em> the sandboxed <code>iframe</code>. When the <code>webview</code> is inside a sandbox, it silently refuses to load anything.</p>
  
  <p>Secondly, there are errors in the console when I run this app:</p>
  
  <pre><code> GET chrome-extension://boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js net::ERR_FAILED www-embed-player.js:140
   GET chrome-extension://dliochdbjfkdbacpmhlcpmleaejidimm/cast_sender.js net::ERR_FAILED www-embed-player.js:140
   GET chrome-extension://hfaagokkkhdbgiakmmlclaapfelnkoah/cast_sender.js net::ERR_FAILED www-embed-player.js:140
   GET chrome-extension://fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js net::ERR_FAILED www-embed-player.js:140
   GET chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js net::ERR_FAILED www-embed-player.js:140
  </code></pre>
  
  <p>These errors come when I load the <code>iframe</code> shown above, inside the sandboxed page. These errors are strange (why is Chrome trying to load a JS file out of some random Chrome extensions?)</p>
  
  <p>When I try to start playing the video in the <code>iframe</code>, I get sometimes the message "An error occurred" from the Youtube player, and sometimes no message but the player goes black. In all cases, I have this error on the console:</p>
  
  <pre><code> XMLHttpRequest cannot load https://www.youtube.com/get_video_info?html5=1&amp;video_id=S2VXOd3uXh8&amp;cpn=Rso…=en_US&amp;sts=16309&amp;lact=11140&amp;width=300&amp;height=300&amp;iframe=1&amp;c=web&amp;cver=html5. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
  </code></pre>
  
  <p>My <code>manifest.json</code> has all necessary permissions:</p>
  
  <pre><code> "permissions": [
   "http://www.youtube.com/*", "https://www.youtube.com/*", "webview" ],
   "sandbox": {
     "pages": [ "sandbox.html" ]
   }, ...
  </code></pre>
  
  <p>I tried <code>&lt;object data=...&gt;</code>, <code>&lt;embed src=...&gt;</code>, <a href="http://mediaelementjs.com/examples/?name=youtube]" rel="nofollow">MediaElement</a> - none of them works at all in a Chrome app.</p>
  
  <p>I am at a loss and can't find any relevant information on the Web either.</p>
  
  <ul>
  <li><p>Why is the <code>webview</code> blank when it is inside a sandboxed <code>iframe</code>?</p></li>
  <li><p>Is there something I can do to make <code>webview</code> or <code>iframe</code> work inside a sandboxed <code>iframe</code> in a packaged Chrome app to show Youtube videos?</p></li>
  </ul>