So I've been trying to implement amp-iframe in my code after thoroughly reading its documentation and multiple articles on the matter. The issue is that I can't seem to satisfy the rules.
The most common error I get is Origin of must not be equal to container since I can't serve the iframe from the same domain as the amp page.
When removing the allow-same-origin from the sandbox attribute, I get DOMException: Failed to read the 'cookie' property from 'Document': The document is sandboxed and lacks the 'allow-same-origin' flag.
Also tried using TinyURL to redirect my domain with a short Url version, but I'm still getting the same error as before.
Finally, when I removed the sandbox attribute, I'd get Blocked script execution in '' because the document's frame is sandboxed and the 'allow-scripts' permission is not set
<amp-iframe layout="responsive" src={`${videoPageUrl}`} sandbox="allow-scripts allow-forms allow-same-origin" width="16" height="9" scrolling="no" resizable="" allowfullscreen="true">
<amp-img layout="fill" alt="Image without a caption" class="w-100 mw-100 h-auto" width="600" height="450" placeholder="true" src={thumbnailImage}>
</amp-img>
<div overflow="" tabIndex="0" role="button" aria-label="Watch more">Watch more!</div>
</amp-iframe>
</>
