Use add_filter to add wrapper div around oembed for foundation flex-video

We’re starting to post more videos on our blog and we typically utilize Foundation as our responsive framework of choice. The Linchpin site itself is built on top of modified fork of the library (found here).

To keep our oEmbed videos working tip top. Foundation has a useful wrapper div to keep videos resizing nice nice. Rather than having authors worry about making sure each oembed has the proper wrapper class. We can simply add a filter to our theme (or better yet create a plugin) to add the functionality we need.

The embed_oembed_wrapper filter supports a few more arguments but we’re specifically focusing on the $html argument so we can add our wrapper div.

    /**
     * add_oembed_wrapper
     *
     * @param $html
     * @param $url
     * @param $attr
     * @param $post_id
     * @return string
     */

    function add_oembed_wrapper( $html, $url, $attr, $post_id ) {
        return '<div class="flex-video widescreen">' . $html . '</div>';
    }

    add_filter( 'embed_oembed_html', 'add_oembed_wrapper', 10, 4 );

As you can see it’s not a lot of code at all to accomplish our goal.