Question

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

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

Answer 1

这CSS Tricks article解释了如何做得好。

我在下面的代码段中为您提供了一些解释性说明。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在主题的CSS或自定义CSS部分中添加以下样式：

iframe{
   max-width: 100%;
}

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

谢谢

Answer 3

我写了一个名为＆＃34; Responsive Media＆＃34;的插件。它使嵌入式媒体（通过oEmbed）像Youtube视频响应。您只需在文章中插入Youtube视频网址即可（安装此插件后）。

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

Answer 4

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

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

参考：Developer Handbook

WordPress中响应式iframe

4 个答案: