As the title says, I’m trying to style an iframe from rendered content in React. I am needing to set the iframe’s width and height to an aspect ratio, which typically requires wrapping the iframe in a specific div. Since it’s being pulled in from post content data, I don’t have the ability to add a wrapper div to the iframe. Is there a way to manage the width and height of an iframe for this type of scenario?
Also, not using jQuery, so that is not an option.
Advertisement
Answer
I figured it out actually.
I added this into the WP functions.php
function div_wrapper($content) { // match any iframes $pattern = '~<iframe.*</iframe>|<embed.*</embed>~'; preg_match_all($pattern, $content, $matches); foreach ($matches[0] as $match) { // wrap matched iframe with div $wrappedframe = '<div>' . $match . '</div>'; //replace original iframe with new in content $content = str_replace($match, $wrappedframe, $content); } return $content; } add_filter('the_content', 'div_wrapper');