javascript - 添加包含任何 iframe、wordpress 的 div

Question

我正在使用此功能使 Youtube 视频具有响应性。这会在 Youtube 嵌入代码周围添加一个 div。

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;
}

它很好用，但我只是从别人的教程中复制过来的，所以我不明白它到底在做什么。我想修改它，以便它也添加围绕 libsyn iframe 的相同 div。

这就是 Youtube iframe 代码的样子，上面的函数添加了一个包络 div。

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

这是Libsyn iframe，当前函数没有添加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>

如何修改函数以将相同的 div 添加到两个 iframe？

Answer 1

由于 libsyn 可能不是默认的 oembed 提供程序，您可以尝试使用以下代码在您的 functions.php 文件中注册它:

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

或者您可以使用 jQuery:

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

否则，只需使用纯 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>