8

Id like to have wordpress automatically wrap a div around any iframe or embed when they are used in the_content...how might this be achieved?

3 Answers 3

2

try jQuery

$('iframe').wrap('<div class="wrapper" />');
2
  • This actually ended up being a simpler and more useful solution later after realizing that the php function was targeting too broad of a spectrum of iframes thoughout the site.
    – Mr.Brown
    Sep 6, 2012 at 16:04
  • Of course this won't work if the browser has JavaScript disabled. Oct 14, 2015 at 6:15
21

Here's the solution I used:

function wrap_embed_with_div($html, $url, $attr) {

     return '<div class="video-container">' . $html . '</div>';

}

 add_filter('embed_oembed_html', 'wrap_embed_with_div', 10, 3);
3
  • 1
    If I am not wrong, for the filter to work, the last line should be: add_filter( 'embed_oembed_html', 'wrap_embed_with_div', 10, 4 );
    – its_me
    Dec 3, 2013 at 20:07
  • The last parameter in add_filter is accepted_args, which is an integer indicating the number of arguments accepted by the function, which in this case is 3.
    – user23385
    Feb 10, 2014 at 17:28
  • that is correct @user23385, the 4th argument would be $post_id. whilst in your answer you only make use of argument 1. so it would be save to skip the 10 (default) and the 3 since you only need 1 and that would also be default.. (but than you would also need to delete $url & $attr in your function) thanks for the answer, though, exactly what i needed :)
    – honk31
    Nov 16, 2018 at 11:19
9

With Wordpress filters. Add this to your 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');
5
  • Apologies for the late response, Ive away for work...this looks very promising, Ill give it a go and report back.
    – Mr.Brown
    Aug 18, 2012 at 1:27
  • This works great, but is there any way to limit the wrapper to only output once after detecting the first iframe or embedded object?...
    – Mr.Brown
    Aug 18, 2012 at 2:21
  • You could use preg_match instead of preg_match_all to only get one result. Or rewrite the foreach to break after the first iteration. Or not use a foreach and just get the first match ($match = $matches[0]). Just make sure you check if you've gotten any matches first.
    – pbd
    Aug 18, 2012 at 10:52
  • 1
    This is f-ing awesome! I used this to ensure videos are responsive with bootstrap helper class: $wrappedframe = '<div class="embed-responsive embed-responsive-16by9">' . $match . '</div>';
    – Radmation
    Jun 8, 2017 at 20:44
  • I have hundreds of iframes on my site and I added this chunk of code to my functions.php file and nothing happened. I have tried using jQuery and several other methods and no matter what I do I cant wrap a div around my iframes.
    – Nick
    Jul 8, 2019 at 18:08

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.