This is a WordPress core question and only a CSS question as a byproduct.

I am designing a theme using bootstrap. Everything looks exactly as I want it to with one exception - links embedded from my test blog.

According to bootstrap, there are utility classes for ensuring responsive iframes. However, this is markup from deep within the depths of WordPress and the block system.

It comes from the_content(); like this:

<p><iframe ...></iframe></p>

The result looking like this - notice how the oembed has overflowed the right-hand side:

enter image description here

Is there a way to class those p tags (and only those p tags as embed-responsive embed-responsive-16by9 or similar or is there some other way to make the errant iframe get back inside where it belongs?

For example, is there something I can hook to alter the output of the_content() and specifically investigate which type of block each one is?

  • Did you use the Custom HTML block? If you did, you should be able to add <div class="embed-responsive embed-responsive-16by9"><iframe ...></iframe></div> or something like that. Or are you not using the Gutenberg editor?
    – Sally CJ
    Commented Sep 14, 2019 at 2:10
  • This is straight out of the Gutenberg editor. Commented Sep 14, 2019 at 16:28
  • What block you used to insert the iframe? It was you who inserted it, right?
    – Sally CJ
    Commented Sep 14, 2019 at 22:43
  • It's a link oembed (link to another post on same site). Commented Sep 15, 2019 at 12:29
  • 1
    Nevertheless, with the Classic editor (or block in the Gutenberg editor), that p tags do get injected automatically. Yet, you can hook to the_content and replace the tags via str_replace(). E.g. str_replace( [ '<p><iframe', '</iframe></p>' ], [ '<div class="embed-responsive embed-responsive-16by9"><iframe', '</iframe></div>' ], $content )
    – Sally CJ
    Commented Sep 16, 2019 at 0:16


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.