AMP Iframe forcing 400px height

  • Resolved Marty

    (@bozzmedia)


    2 years, 5 months ago

    We are using an iframe from captivate.fm:

    <div style=”width: 100%; height: 200px; margin-bottom: 10px; border-radius: 6px; overflow: hidden;”><iframe style=”width: 100%; height: 200px;” frameborder=”no” scrolling=”no” seamless src=”https://player.captivate.fm/episode/495621d8-6f05-4d95-bbaa-369a9a6189e1″></iframe></div&gt;

    Displays as expected on desktop view. On Amp, it looks like this:

    <amp-iframe frameborder="0" scrolling="no" src="https://player.captivate.fm/episode/495621d8-6f05-4d95-bbaa-369a9a6189e1" height="400" layout="fixed-height" width="auto" sandbox="allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation" data-amp-original-style="width: 100%; height: 200px;" class="amp-wp-59f8e90 i-amphtml-layout-fixed-height i-amphtml-layout-size-defined i-amphtml-element i-amphtml-built i-amphtml-layout" style="/*! height: 400px; */ --loader-delay-offset: 107ms !important;" i-amphtml-layout="fixed-height"><span placeholder="" class="amp-wp-iframe-placeholder amp-hidden"></span><noscript><iframe frameborder="0" scrolling="no" src="https://player.captivate.fm/episode/495621d8-6f05-4d95-bbaa-369a9a6189e1"></iframe></noscript><iframe class="i-amphtml-fill-content" name="amp_iframe0" style="z-index: 0;" scrolling="no" allow="" sandbox="allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation" src="https://player.captivate.fm/episode/495621d8-6f05-4d95-bbaa-369a9a6189e1#amp=1" frameborder="0"></iframe></amp-iframe>

    The 400px height of the amp-iframe is throwing off the player’s controls. Is there a way to not have the height set to 400px here?

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Marty

    (@bozzmedia)

    2 years, 5 months ago

    Link to the url with amp view:

    https://www.temporary-url.com/2E1

    Plugin Author Weston Ruter

    (@westonruter)

    2 years, 5 months ago

    Try replacing style="width: 100%; height: 200px;" with width="100%" height="200".

    So like the following:

    <div style="width: 100%; height: 200px; margin-bottom: 10px; border-radius: 6px; overflow: hidden;">
	<iframe width="100%" height="200" frameborder="no" scrolling="no" src="https://player.captivate.fm/episode/495621d8-6f05-4d95-bbaa-369a9a6189e1"></iframe>
</div>

    This also removes the seamless iframe which is obsolete and is not supported by any browser: https://caniuse.com/iframe-seamless

    It seems the plugin’s iframe sanitizer is neglecting to detect the height:200px in the style when it tries to convert the iframe to amp-iframe. So it is supplying the default fallback height of 400px instead. I’ve opened a pull request to address this: https://github.com/ampproject/amp-wp/pull/6662

    In the meantime, you can use the above source HTML code instead.

    🚴🏻‍♂️💪

    Thread Starter Marty

    (@bozzmedia)

    2 years, 5 months ago

    Thanks for the super speedy response!

    Appreciate the insight and the code update request.

    I’ll circle back to captivate about this as I believe they provide this embed code to us.

    Cheers!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘AMP Iframe forcing 400px height’ is closed to new replies.