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
JavaScript
x
17
17
1
function div_wrapper($content) {
2
// match any iframes
3
$pattern = '~<iframe.*</iframe>|<embed.*</embed>~';
4
preg_match_all($pattern, $content, $matches);
5
6
foreach ($matches[0] as $match) {
7
// wrap matched iframe with div
8
$wrappedframe = '<div>' . $match . '</div>';
9
10
//replace original iframe with new in content
11
$content = str_replace($match, $wrappedframe, $content);
12
}
13
14
return $content;
15
}
16
add_filter('the_content', 'div_wrapper');
17