Add div containing any iframe, wordpress

1 Views

I am using this function to make Youtube videos responsive. This adds a div surrounding Youtube embed codes. 

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

function custom_oembed_filter($html, $url, $attr, $post_ID) {
    $return = '<div class="video-container">'.$html.'</div>';
    return $return;
}

It works great, but I just copied it from someone’s tutorial, so I don’t understand exactly what it’s doing. I want to modify it so that it also adds the same div surrounding a libsyn iframe.

Read More

This is what the Youtube iframe code looks like, and the function above adds an enveloping div as it should. 

<iframe src="//www.youtube.com/embed/MKif3vEhgdg" frameborder="0" allowfullscreen="allowfullscreen" style="width: 690px; height: 388.125px;"></iframe>

This is the Libsyn iframe, and the current function does not add a div. 

<iframe style="border: none;" src="//html5-player.libsyn.com/embed/episode/id/4016467/height/360/width/640/theme/standard/direction/no/autoplay/no/autonext/no/thumbnail/yes/preload/no/no_addthis/no/" width="640" height="360" scrolling="no" allowfullscreen="allowfullscreen"></iframe>

How can I modify the function to add the same div to both iframes?

Post Views: 1

Related posts

2 comments

  1. Since libsyn is probably not a default oembed provider, you could try to register it using this code in your functions.php file:

    function custom_oembed_provider() {
    wp_oembed_add_provider( '//html5-player.libsyn.com/*', '', false );
}
add_action( 'init', 'custom_oembed_provider' );

    or you could use jQuery:

    jQuery(document).ready(function() {
    jQuery('iframe[src*="html5-player.libsyn.com"]').wrap('<div class="video-container" />');
});

    otherwise, just use plain HTML:

    <div class="video-container"><iframe style="border: none;" src="//html5-player.libsyn.com/embed/episode/id/4016467/height/360/width/640/theme/standard/direction/no/autoplay/no/autonext/no/thumbnail/yes/preload/no/no_addthis/no/" width="640" height="360" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div>

  2. The filter tag you are using 'embed_oembed_html' only matches websites from a whitelist as mentioned here http://codex.wordpress.org/Embeds#In_A_Nutshell

    This list contains youtube (so it works) but not libsyn.

    You need to add support for libsyn by either calling wp_oembed_add_provider() if it has oEmbed enabled (docs), or wp_embed_register_handler() if not (docs).

Comments are closed.