I’ve embedded an Iframe into my blog page which is converted into an AMP-IFRAME on the amp page.
I would have to change the size of the amp-iframe as it is smaller than on the canonical page.
Does anyone know how can I modify the default width=“600” height=“400” attribute on the AMP page?
Many thanks!
Hi there. Best way to make modifications is to copy the amp.hbs template into your theme and make changes there. Check out the docs on AMP page templating:
https://ghost.org/docs/api/v2/handlebars-themes/google-amp/
As well as the default amp.hbs template within Ghost:
https://github.com/TryGhost/Ghost/blob/master/core/frontend/apps/amp/lib/views/amp.hbs
@tamasPetki for the general AMP layout, what @DavidDarnes said above is spot on.
To set sizes for any <amp-iframe> components you’ll need to have width and height attributes set on the original <iframe> in your content.
Thanks, guys. Actually I have width: 100% specified, but Ghost overwrites this attribute on the AMP page to a fixed one. Which won’t be a problem, but I can’t find the way to modify it.
I’ve tried to modify the template also (to give an exact width and height in the style amp-custom tag), but that doesn’t work.
Are you trying to change it to be smaller? Might be worth checking out the official AMP documentation, there’s some info here about iframe resizing Documentation: <amp-iframe> - amp.dev