Skip to content

Styling rendered iframe in react

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.


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