1

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 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>&mdash; 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.

0

You should be doing some sort of check at the beginning of your function to ensure you're in an oembed that you actually want to mod. something like

if (strpos($url, youtube.com) === false && strpos($url, vimeo.com) === false) {
    return $cache;
}

Although you might want to elaborate on that to catch shortened urls like youtu.be as well.

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.