amp-iframe not allowing http on localhost

Hi Jayme,

All amp-iframe resources must be requested via HTTPS as per the usage section of the amp-iframe component.

As this isn’t specific to the AMP plugin you can also ask the same question at the #using-amp Slack channel or at the amp-html tag at Stack Overflow.

@jcedwards76 Since it’s a validation error, the AMP plugin removes it. What you can do is mark the invalid markup for the “Invalid URL protocol http: for attribute src” validation error as “kept”. In that way, it will serve you an invalid AMP page with the https://localhost source for testing.

Another way to achieve this without the validation error is to add the data-ampdevmode attribute to the amp-iframe element. Read more on my post.

How are you adding the iframe to the page? Is it in a Custom HTML block? That may be why Gutenberg is identified as the source.

Please review this issue on the AMP project’s github, unless I’m misunderstanding it sounds like it should be possible.

https://github.com/ampproject/amphtml/issues/3154

Admittedly this isn’t in the documentation – so not meaning to say y’all should have easily found this.

Thanks for the workaround. Hopefully this helps.

The component JS allows localhost, but the validator does not. That’s the difference. The AMP plugin enforces the validator’s constraints, so that’s why it’s getting removed. So you can bypass the plugin’s validator via the dev mode attribute or by telling the validator to keep the markup instead of removing it. Then the amp-iframe component will work with the localhost as you’re wanting.

A similar issue was raised about amp-autocomplete and I offered a similar solution: https://github.com/ampproject/amp-wp/issues/5402

Thanks Weston, that makes sense. Appreciate the detailed explanation.

Hi Friends

i have Trying am-frame from one off the WordPress post page but not working,
please correct solution .

<script async custom-element=”amp-iframe” src=”https://cdn.ampproject.org/v0/amp-iframe-0.1.js”></script&gt;
<script async custom-element=”amp-bind” src=”https://cdn.ampproject.org/v0/amp-bind-0.1.js”></script&gt;

<amp-iframe width=”580″ height=”326″ src=”https://www.youtube.com/embed/6O1Bu_934mI?ecver=1&#8243; frameborder=”0″ allowfullscreen=”” sandbox=”allow-scripts allow-same-origin allow-popups” sizes=”(min-width: 580px) 580px, 100vw” class=”amp-wp-enforced-sizes”>
</amp-iframe>

Thanks
Bala E

Hello @balainfo

Please create a new support topic, so we can discuss your case in a specific support topic.