WordPress 中的响应式 iframe

Posted 2023-03-05

【中文标题】WordPress 中的响应式 iframe

【英文标题】：Responsive iframe in WordPress

【发布时间】：2015-12-19 17:32:07

【问题描述】：

为这个非常简单的问题道歉！我在我的 WordPress 网站上嵌入了一个 YouTube 视频，并希望它具有响应性，有没有一种简单的方法可以向 html 添加一些代码 - 这就是我目前所拥有的：

<center><iframe   src="https://www.youtube.com/embed/zmRoFi5HCAc?rel=0" frameborder="0" allowfullscreen></iframe></center>

【问题讨论】：

你的代码在哪里？你在使用 CSS 框架吗？请为您的问题添加更多详细信息。

<center> 标签已弃用：developer.mozilla.org/en-US/docs/Web/HTML/Element/center

【参考方案1】：

我认为 WordPress 为此添加了新的主题支持（wp 5.x）：

// Add support for responsive embeds.
add_theme_support( 'responsive-embeds' );

参考：Developer Handbook

【参考方案2】：

在您主题的 CSS 或自定义 CSS 部分添加此样式：

iframe
   max-width: 100%;

这应该使您的基于 iframe 的视频嵌入，移动响应。让我知道它是否有效？如果它不起作用，您也可以分享您的链接。

谢谢

【讨论】：

感谢您的帮助 - 我刚刚添加了自定义 CSS，它起作用了 :)

@Alzad 很高兴它成功了！您可以将此我的回复标记为已选择的答案:)

我做了，但显然我的标记只会在一定时间后出现，因为我是 Stack Overflow 的新手。

@Alzad 没问题！欢迎来到 Stack Overflow Alzad！

【参考方案3】：

这个CSS Tricks article 解释了如何做好这件事。

我在下面的sn-p中为你放了一些解释性的cmets。

.responsive-container 
    position: relative;
    padding-bottom: 56.25%; /* fallback if calc() not supported */
    padding-bottom: calc(315 / 560 * 100%); /* aspect ratio of iframe */
    height: 0; /* let padding set the height */


.responsive-container iframe 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* fill container */
    height: 100%; /* fill container */


center 
    width: 300px;
    margin: 0 auto;
    padding: 0 5px 5px 0;
    overflow: hidden;
    resize: both;

<center><div class="responsive-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/zmRoFi5HCAc?rel=0" frameborder="0" allowfullscreen></iframe></div></center>

【参考方案4】：

我写了一个名为“响应式媒体”的插件。它使嵌入式媒体（通过 oEmbed）像 Youtube 视频一样响应。您所要做的（安装此插件后）只需在您的文章中插入 Youtube 视频 URL。

https://nl.wordpress.org/plugins/responsive-media/