0

I am using Automattic's plugin to implement AMP on my website. Currently, to make my videos responsive, I wrap YouTube videos around a custom div. So, a YouTube video on my website looks like this:-

<div class="yt">
<iframe>....YT video code...</iframe>
</div>

The problem is the <div class="yt"> and the closing </div> both appear on the AMP pages too. How can I remove them? Already tried asking on the official support. No replies yet.

2
  • How are you adding them? With code? Or just in the editor? – Jacob Peattie Nov 5 '18 at 15:43
  • If you are asking about the custom div, I add them via the editor. So, when I have to add a video, I go to the HTML Editor for the post and add the video embed code within the custom yt div – user1928108 Nov 5 '18 at 15:46
1

Thanks to Thomas' answer to my question at StackOverflow - https://stackoverflow.com/questions/53158606/remove-div-with-a-class-without-removing-content

Here's how you can do it on Wordpress for AMP. In your theme's functions.php add the following:-

add_action( 'pre_amp_render_post', 'amp_vid_rmv' );
   function amp_vid_rmv() {
add_filter( 'the_content', 'amp_vid_div_rmv' );
} 
function amp_vid_div_rmv($content) {
   $content = preg_replace('#<div class="yt">([\s\S]*?)</div>#', '$1', $content);
   return $content;
}

Please feel free to improve on this.

1

Sometimes you want to delete not the html code but shortcode. Then use something like that:

add_action( 'pre_amp_render_post', 'amp_vid_rmv' );
   function amp_vid_rmv() {
add_filter( 'the_content', 'amp_vid_div_rmv' );
} 
function amp_vid_div_rmv($content) {
  $content = preg_replace('#\[shortcode_name_here\]<br \/>#', '$1', $content);
   ?> <div>in func 9 </div> <?php 
   return $content;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.