如何编辑YouTube视频嵌入滤镜以允许响应全宽布局

时间：2018-08-11 作者：Mr.Brown

我正在尝试从wordpress编辑建议的嵌入过滤器。org使youtube视频始终保持其容器div内的100%宽度，同时根据需要保持适当的高度尺寸。这可能吗？

https://codex.wordpress.org/Plugin_API/Filter_Reference/embed_defaults#Examples

add_filter( \'embed_defaults\', \'modify_embed_defaults\' );
function modify_embed_defaults() {
    return array(
        \'width\'  => 750, 
        \'height\' => 375
    );
}
起初，我只是简单地编辑宽度和高度维度，以适应我帖子内容的包装div，然后测试了过滤器，但是每次都不可能知道视频的必要高度维度，因为这可能会有所不同。。。此外，当使用此方法查看带有嵌入式视频的帖子内容时，视频不会针对较小的屏幕进行适当的缩放。

有没有非插件解决方案？我希望能为我的孩子主题添加一个过滤器functions.php

谢谢Shaun

1 个回复
最合适的回答,由SO网友:Mr.Brown 整理而成

多亏了Serkan的建议，我找到了正确的方向，可以搜索包装而不是过滤视频本身（尽管我喜欢“只过滤”的解决方案）尽管如此，我在这里偶然发现了一个简单的解决方案-https://millionclues.com/wordpress-tips/fullwidth-responsive-youtube-embeds/ ...

我希望这可以帮助其他人解决同样的问题：）

过滤器：

add_filter( \'embed_oembed_html\', \'wrap_embed_with_div\', 10, 3 );

function wrap_embed_with_div( $html ) {
    return \'<div class="hbps-responsive-video">\' . $html . \'</div>\';
}
CSS：

.hbps-responsive-video { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
}

.hbps-responsive-video iframe, 
.hbps-responsive-video object, 
.hbps-responsive-video embed, 
.hbps-responsive-video video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0;
    width: 100%;
    height: 100%;
}

结束
标签： filters   embed   responsive   youtube   小码农  

相关推荐

如何通过emed_oembed_html为IFRAME添加自定义类

我想为embed\\u oembed\\u html过滤器（iframe）添加一个自定义类。注1：使用str\\u replace将删除其他类，因此它没有用处。注2：我需要将自定义类直接添加到ifram标记中，而不是将完整的iframe代码添加到另一个标记中，如<div>.