6

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?

1

try jQuery

$('iframe').wrap('<div class="wrapper" />');
  • 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 '12 at 16:04
  • Of course this won't work if the browser has JavaScript disabled. – Craig Oct 14 '15 at 6:15
16

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);
  • 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 '13 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 '14 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 '18 at 11:19
7

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');
  • 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 '12 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 '12 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 '12 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 '17 at 20:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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