Building a theme with Boostrap 4 and WordPress 5.0.1. Under Bootstrap's documentation for embed video the following format is required for responsive videos:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
Searching under the tag oembed and reading the following Q&As:
Using wp-test with my function of:
function oembed_mod($cache,$url,$attr,$post_ID) {
if (stripos($cache,'youtube.com') !== FALSE && stripos($cache,'iframe') !== FALSE) {
$cache = str_replace('<iframe','<iframe class="embed-responsive-item" ', $cache);
}
$classes = [];
// Add these classes to all embeds.
$classes_all = array(
'embed-responsive',
'embed-responsive-16by9',
);
// Check for different providers and add appropriate classes.
if (false !== strpos($url,'vimeo.com')) {
$classes[] = 'vimeo-video';
}
if (false !== strpos($url,'youtube.com')) {
$classes[] = 'youtube-video';
}
$classes = array_merge($classes,$classes_all);
return '<div class="' . esc_attr(implode($classes,' ')) . '">' . $cache . '</div>';
}
add_filter('embed_oembed_html','oembed_mod',99,4);
I can modify Youtube and Vimeo videos and I get:
<div class="youtube-video embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="500" height="281" src="https://www.youtube.com/embed/nwe-H6l4beM?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
but on my Twitter post testing I get:
<div class="embed-responsive embed-responsive-16by9">
<blockquote class="twitter-tweet" data-width="500" data-dnt="true">
<p lang="en" dir="ltr">Doing what you “know” locks you in a prison of the past. Uncertainty is the path to an innovative future.</p>
<p>— Carl Smith (@carlsmith) <a href="https://twitter.com/carlsmith/status/258214236126322689?ref_src=twsrc%5Etfw">October 16, 2012</a></p>
</blockquote>
<p><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
Is the Twitter feed apart of the oembed? Is there a preferred approach to video only manipulation so that I can ignore Twitter feeds or do I need to write a conditional on the variable $cache
if twitter-tweet
exists?
Edit:
I can get my function to work with:
if (stripos($cache,'twitter.com') !== false) :
return $cache;
endif;
but I think my end goal is to know if there is a better/elegant way to go about this. Current setup seems to be somewhat a hack and as already mentioned this doesn't address all youtube URLs unless I code a foreach look for the needle.