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 Sep 14 '19 at 2:10
  • This is straight out of the Gutenberg editor. – Matthew Brown aka Lord Matt Sep 14 '19 at 16:28
  • What block you used to insert the iframe? It was you who inserted it, right? – Sally CJ Sep 14 '19 at 22:43
  • It's a link oembed (link to another post on same site). – Matthew Brown aka Lord Matt Sep 15 '19 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 Sep 16 '19 at 0:16

Your Answer

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

Browse other questions tagged or ask your own question.