feed - Why is my oembed function modifying Twitter embed?|Programmer puzzle solving

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="" allowfullscreen></iframe>
</div>

Searching under the tag oembed and reading the following Q&As:

How to wrap oEmbed-embedded video in DIV tags inside the_content?
Responsive iframe using Bootstrap

Using wp-test with my function of:

function oembed_mod($cache,$url,$attr,$post_ID) {
    if (stripos($cache,'youtube') !== 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')) {
        $classes[] = 'vimeo-video';
    }

    if (false !== strpos($url,'youtube')) {
        $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="" 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="">October 16, 2012</a></p>
    </blockquote>
    <p><script async src=".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') !== 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.

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/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

Searching under the tag oembed and reading the following Q&As:

How to wrap oEmbed-embedded video in DIV tags inside the_content?
Responsive iframe using Bootstrap

Using wp-test with my function of:

function oembed_mod($cache,$url,$attr,$post_ID) {
    if (stripos($cache,'youtube') !== 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')) {
        $classes[] = 'vimeo-video';
    }

    if (false !== strpos($url,'youtube')) {
        $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/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/carlsmith/status/258214236126322689?ref_src=twsrc%5Etfw">October 16, 2012</a></p>
    </blockquote>
    <p><script async src="https://platform.twitter/widgets.js" charset="utf-8"></script>
</div>

Edit:

I can get my function to work with:

if (stripos($cache,'twitter') !== false) :
    return $cache;
endif;

Share Improve this question edited Dec 20, 2018 at 2:55 Johansson 15.4k11 gold badges44 silver badges80 bronze badges asked Dec 19, 2018 at 17:18 user9447 1,7927 gold badges30 silver badges55 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 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) === false && strpos($url, vimeo) === false) {
    return $cache;
}

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

Programmer puzzle solving

feed - Why is my oembed function modifying Twitter embed?

1 Answer 1

Articles related to this article

comment list (0)