When embedding a youtube-iframe into another iframe, which is sandboxed (to prevent XSS) the player stays black in all major browser.
See https://jsfiddle.net/ms9fwLbk/
<!DOCTYPE html><html lang='en'><head><title>Sandbox iframe youtube problem</title></head><body><iframe sandbox='allow-scripts allow-presentation' width='600' height='400' srcdoc='<!DOCTYPE html><html lang="en"><head><title>iframe</title></head><body><!-- original source-code shared from youtube: --><iframe width="560" height="315" src="https://www.youtube.com/embed/QwS1r1mc888?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></body></html>'></iframe></body></html>The browsers' console log shows following errors, because the youtube-api has troubles with CORS(allow-same-origin is no option here, because allow-scripts is enabled and would make cookies vulnerable)
Uncaught DOMException: Failed to read the 'cookie' property from 'Document':The document is sandboxed and lacks the 'allow-same-origin' flag.at Vb.m.get (https://www.youtube.com/yts/jsbin/www-embed-player-vflwaq4V_/www-embed-player.js:142:47)Access to XMLHttpRequest at 'https://www.youtube.com/error_204?...'from origin 'null' has been blocked by CORS policy:Response to preflight request doesn't pass access control check:No 'Access-Control-Allow-Origin' header is present on the requested resource.It does not help to
- allow more features within the sandbox, or define sandbox also on the inner iframe
- use youtube's old object embed source-code
- remove allow-parameters from the youtube-player
- apply enhanced privacy mode by using youtube-nocookie.com
How to make youtube ignore cookie-access- or preflight-origin-limitations?
(Vimeo has no issues within such sandboxed iframe, but some videos are only available in youtube.)
