如何在WordPress中更改嵌入式视频的默认宽度参数?

时间:2015-03-28 作者:Vijay Lal

我使用Wordpress的嵌入式视频短代码在帖子内容中显示视频

[embed width="600" height="456"]https://www.youtube.com/watch?v=f5CcOq8UzkI[/embed].

呈现的html是

<iframe width="600" height="338" src="https://www.youtube.com/embed/f5CcOq8UzkI?feature=oembed" frameborder="0" allowfullscreen=""></iframe>

我觉得它真的很好很酷。它工作得很好。

唯一的问题是视频没有响应,因为它需要px的宽度。

有没有办法将宽度参数从px更改为%如100%?

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

如果你能做到这样:

<div class="videoWrapper">
    <iframe width="600" height="338" src="https://www.youtube.com/embed/f5CcOq8UzkI?feature=oembed" frameborder="0" allowfullscreen=""></iframe>
</div>
然后,对此做出响应的css如下所示:

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
如果您对标记没有控制权,那么我们可以做的是在编辑器中放置该短代码时,在其周围添加一些div,如下所示:

<div class="videoWrapper">
    [embed width="600" height="456"]https://www.youtube.com/watch?v=f5CcOq8UzkI[/embed]
</div>

结束

相关推荐

如何将POST中的oEmbeded URL替换为实际的嵌入的HTML

我想要的是将推特oEmbed系统的输出输入到我的实际帖子中。IMHO嵌入输出本身是高质量的语义HTML,我宁愿将其放在帖子中,也不要放在嵌入元数据中,以防js停止工作(在这种情况下,推特将显示为合理的blockquote)。因此,我需要的是劫持oEmbed系统,并在处理后,将帖子中的嵌入URL替换为来自Twitter的HTML。显然,该解决方案还应该能够处理其他类型的嵌入。更新:我只是想澄清一下,我知道oEmbed在默认情况下是如何工作的(即,当对帖子内容运行“the\\u content”过滤器时,UR