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?
Add a comment
|
3 Answers
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.BrownSep 6, 2012 at 16:04
-
Of course this won't work if the browser has JavaScript disabled. Oct 14, 2015 at 6:15
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);
-
1If 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_meDec 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. 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 the10(default) and the3since you only need1and that would also be default.. (but than you would also need to delete$url&$attrin your function) thanks for the answer, though, exactly what i needed :)– honk31Nov 16, 2018 at 11:19
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.BrownAug 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.BrownAug 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.– pbdAug 18, 2012 at 10:52
-
1This 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>';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.– NickJul 8, 2019 at 18:08