• Resolved YummyWP

    (@yummy-wp)


    Hi there,

    It seems that plugin has an issue with adding placeholder for iframes.
    When using this code

    AMP_Content_Sanitizer::sanitize( $content, [
    				'AMP_Iframe_Sanitizer'   => array(
    					'add_placeholder' => true,
    				),
    			] )

    it does not add <span placeholder></span> to the iframe.

    Could you please check?

    Thank you
    Stanislav

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Pierre Gordon

    (@pierlo)

    Hi @yummy-wp,

    The placeholder for amp-iframe elements are added by default. They will look like:

    
    <span placeholder="" class="amp-wp-iframe-placeholder amp-hidden"></span>
    
    Plugin Author Weston Ruter

    (@westonruter)

    Indeed:

    echo AMP_Content_Sanitizer::sanitize(
    	'<iframe src="https://example.com"></iframe>',
    	[
    		'AMP_Iframe_Sanitizer'   => array(
    			'add_placeholder' => true,
    		),
    	]
    )[0];

    Results in:

    <amp-iframe src="https://example.com" height="400" layout="fixed-height" width="auto" sandbox="allow-scripts allow-same-origin">
        <span placeholder="" class="amp-wp-iframe-placeholder"></span>
        <noscript><iframe src="https://example.com"></iframe></noscript>
    </amp-iframe>

    Nevertheless, this placeholder is not helpful as it’s empty. In reality, it is a workaround. It is preferable to actually provide the placeholder yourself, and you can do this as simply as put a child element under the iframe. For example, consider this $content which includes a linked image as a placeholder:

    <iframe src="https://example.com/"><a placeholder href="https://example.com/"><img src="https://example.com/screenshot.png" alt="Example"></a></iframe>

    When sanitizing that content:

    echo AMP_Content_Sanitizer::sanitize(
    	'<iframe src="https://example.com/"><a placeholder href="https://example.com/"><img src="https://example.com/screenshot.png" alt="Example"></a></iframe>',
    	[
    		'AMP_Iframe_Sanitizer'   => array(),
    		'AMP_Img_Sanitizer'   => array(),
    	]
    )[0];

    It results in:

    <amp-iframe src="https://example.com/" height="400" layout="fixed-height" width="auto" sandbox="allow-scripts allow-same-origin">
    	<a placeholder href="https://example.com/">
    		<amp-img src="https://example.com/screenshot.png" alt="Example" object-fit="contain" width="600" height="400" class="amp-wp-unknown-size amp-wp-unknown-width amp-wp-unknown-height amp-wp-enforced-sizes" layout="intrinsic">
    			<noscript>
    				<img src="https://example.com/screenshot.png" alt="Example" width="600" height="400" class="amp-wp-unknown-size amp-wp-unknown-width amp-wp-unknown-height">
    			</noscript>
    		</amp-img>
    	</a>
    	<noscript>
    		<iframe src="https://example.com/"></iframe>
    	</noscript>
    </amp-iframe>
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Placeholder for iframes’ is closed to new replies.