In the plugin folder:
wp-content\plugins\accelerated-mobile-pages\themes\default
Open up header.php and underneath <head> add the following script:
<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
Open up functions.php and add this code under // Strip the styles:
// amp_audio https://www.ampproject.org/docs/reference/extended/amp-audio.html
function amp_audio($content) {
$src2 = preg_match('/<audio\b[^>]*>(.*?)<\/audio>/is', $content, $resultz);
preg_match('/<source(.*)src(.*)=(.*)"(.*)"/U', $resultz[1], $result);
$amp_audio = array_pop($result);
$amp_audio = str_replace("?_=1", "", $amp_audio);
$replace = '<amp-audio width="400" height="300" src="'."$amp_audio".'">
<div fallback>
<p>Your browser doesn’t support HTML5 audio</p>
</div>
<source type="audio/mpeg" src="foo.mp3">
<source type="audio/ogg" src="foo.ogg">
</amp-audio>';
$content = preg_replace('#<audio .*?>(.*?)</audio>#i', $replace, $content);
return $content;
}
add_filter('the_content','amp_audio', 20 );
This code will automatically solve Issue #1a (this code should replace any audio player that has <audio></audio> tag with the amp friendly tag: https://www.ampproject.org/docs/reference/extended/amp-audio.html
Concerning Issue #1b
In the same file “functions.php” look for :
// amp_iframe_tag will convert all the iframe tags and will change it to amp-iframe to make it AMP compatible.
function amp_iframe_tag($content) {
$replace = array (
'<iframe' => '<amp-iframe',
'</iframe>' => '</amp-iframe>'
);
$content = strtr($content, $replace);
return $content;
}
add_filter('the_content','amp_iframe_tag', 20 );
replace it with:
// amp_iframe https://www.ampproject.org/docs/reference/extended/amp-iframe.html
function amp_iframe($content) {
$amp_iframe = preg_match( '#<iframe .*?>(.*?)#i', $content, $matchery );
$amp_iframe = preg_match( '@src="([^"]+)"@' , $matchery[0], $matcher );
$replace = '<amp-iframe width=300 height=300
sandbox="allow-scripts allow-same-origin"
layout="responsive"
frameborder="0"
src="'."$matcher[1]".'">
</amp-iframe>';
$content = preg_replace('#<iframe .*?>(.*?)</iframe>#i', $replace, $content);
return $content;
}
add_filter('the_content','amp_iframe', 20 );
and don’t forget to also add this script to the header.php under <head>:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
