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>

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

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>

Answer 2

您使用的过滤条件'embed_oembed_html'仅匹配白名单中的网站http://codex.wordpress.org/Embeds#In_A_Nutshell

此列表包含youtube（因此可行）但不包含libsyn。

您需要通过调用wp_oembed_add_provider()（如果已启用oEmbed（docs）或wp_embed_register_handler()（如果没有）docs）来添加对libsyn的支持。

添加包含任何iframe的div，wordpress

2 个答案: