如何在视频嵌入中添加iframe边框

12/17/2023

在WordPress中的iframe视频添加边框

首先，你需要打开一个包含iframe视频嵌入代码的文章或页面。典型的iframe嵌入代码如下：

你可以通过在代码中添加内联样式来为其添加边框，如下所示：

只需更改边框的宽度以及颜色，你就完成了。

虽然添加iframe边框可以工作，但实际上有一种更好的方法可以在WordPress中为视频添加边框，那就是使用oEmbed。

WordPress自带oEmbed支持。基本上WordPress允许你粘贴视频链接，它会自动获取嵌入代码。现在这仅适用于启用了oEmbed支持的网站，如YouTube、Vimeo、DailyMotion、Hulu等。

既然你知道如何使用oEmbed添加视频，以下是在WordPress中为oEmbed视频添加边框的方法：

在使用oEmbed添加视频时，只需将URL包裹在带有内联样式参数的span标签中，如下所示：

<span style=”border:3px solid #EEE;”>http://www.youtube.com/watch?v=qzOOy1tWBCg</span>

如果你想为所有视频iframe添加相同的边框，最好是将CSS类添加到主题的样式表中。

.frame-border {
border:3px solid #EEE;
}

现在你可以在iframe嵌入代码中使用CSS类，如下所示：

你也可以在oEmbed视频URL周围的span标签中使用相同的CSS类，如下所示：

<span class=”frame-border”>http://www.youtube.com/watch?v=qzOOy1tWBCg</span>

使用单个CSS类的好处是，如果你以后更改主题，你可以轻松更改颜色，而无需逐个编辑每个视频。

我们希望这篇文章能帮助你在WordPress中为视频嵌入添加iframe边框。你可能还想查看这9个实用的YouTube技巧，以便为你的网站添加视频内容。

Written by

多语言表单有助于与全球观众沟通，使您的网站更易于使用，并吸引更多用户。本文介绍了如何使用WPForms和Formidable Forms插件在WordPress中创建多语言表单，以帮助您轻松实现这一目标。

如果您在WordPress管理区域或其他地方遇到‘jQuery未定义’错误，不必担心，这是一个常见的问题。本文为您介绍了该错误的原因以及六种解决方法，以便让您的网站恢复正常运行。

越来越多的人倾向于使用语音搜索而不是在搜索栏中输入关键词。语音搜索被认为是在线交互的未来，各种设备上数百万人每天都在使用它。与通过普通SEO优化网站一样，将网站适配语音搜索同样重要。在本文中，我们将深入探讨为什么语音搜索SEO如此重要，以及如何优化您的WordPress网站以捕获这些语音搜索。