0

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?

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

0

Reset to default

Your Answer

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