• Resolved rexsorgatz

    (@rexsorgatz)


    Here is my scenario:

    I have thousands of posts that contain embedded content through an obscure video platform. These specific embeds are made via <script> calls. When the AMP plugin sees these, it strips them out. But I need the video embeds on my AMP pages.

    To solve this, I would like access these strings before the AMP plugin strips them out, so that I can turn them into proper AMP markup. That is, so I can turn a string like this…

    <script src="https://embed.site.com/id.js?id=123"></script>

    …into a string like this:

    <amp-iframe src="https://video.site.com/player.html?id=123"></amp-iframe>

    I already have the difficult part: The regex to retrieve, transform, and render the strings. But I don’t know how to architect it to actually retrieve the strings. The default AMP template way to write out post content is this:

    echo $content = $this->get('post_amp_content');

    But by the time that runs, the <script> has already been stripped out, so I cannot run my regex to retrieve it. A possible solution might look something like this:

    // run native wordpress content method...
    $content = get_the_content();
    
    // now run my regex...
    $content = runMyRegex($content);
    
    // now make it amp...
    $content = makeItAmpCompliant($content);
    
    echo content;

    But I cannot find anything like a makeItAmpCompliant() method. Does such a thing exist?

    Or maybe there’s a completely different way to do this that I am not thinking of.

    Thanks for your help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Weston Ruter

    (@westonruter)

    All you need is a the_content filter which conditionally runs on AMP pages.

    This plugin code will will do the trick:

    add_filter(
    	'the_content',
    	function ( $content ) {
    		if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
    			$content = preg_replace_callback(
    				'#<script src="https://embed\.site\.com/id\.js\?id=(?P<id>\d+)"></script>#',
    				function ( $matches ) {
    					$src = add_query_arg( 'id', $matches['id'], 'https://video.site.com/player.html' );
    					return sprintf(
    						'<amp-iframe src="%s" sandbox="allow-scripts" layout="responsive" width="9" height="6"><span placeholder>Loading...</span></amp-iframe>',
    						esc_url( $src )
    					);
    				},
    				$content
    			);
    		}
    		return $content;
    	}
    );

    You’ll probably need to adjust the width, height, and perhaps sandbox.

    Also best to use an amp-img as a placeholder instead of a span, if you can obtain the poster image.

    Also, you may be able to use amp-video-iframe instead of amp-iframe: https://amp.dev/documentation/examples/components/amp-video-iframe/

    • This reply was modified 5 years, 8 months ago by Weston Ruter.
    Plugin Author Weston Ruter

    (@westonruter)

    This code should go in a custom plugin.

    Thread Starter rexsorgatz

    (@rexsorgatz)

    Like a whole new custom plugin? I can’t just implement via functions.php?

    Plugin Author Weston Ruter

    (@westonruter)

    It can go in the theme’s functions.php yes, but not if you have chosen a Reader theme other than AMP Legacy.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Retrieving Script Embeds Before Rendering Content’ is closed to new replies.