Why inserting of YouTube video doesn't work in the case of nested frames

September 22, 2022

I have the following files:

index.htm

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>  
   iframe {
      border: none;
      display: block;
   }
   </style>
</head>    
<body>
   <iframe id="main-frame" src="child.htm" frameborder="0" sandbox="allow-same-origin" allowfullscreen></iframe>
</body>
</html>

child.htm

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<iframe width="640" height="480" src="https://www.youtube.com/embed/jNQXAC9IVRw" 
        title="Me at the zoo" frameborder="0" sandbox="allow-same-origin"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>
</body>
</html>

If we run index.htm then we will get the error that js is unavailable. However, I checked the settings in my browser and claim that javascript is not blocked by it. I tested this in Firefox and Google Chrome and got the same error.

Q1: Why do we get an error about the unavailability of js?

Q2: How to fix it without changes of architecture of iframes?