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');