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

在WordPress中的iframe视频添加边框

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

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/qzOOy1tWBCg” frameborder=”0″ allowfullscreen></iframe>

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

<iframe style=”border: 3px solid #EEE;” width=”560″ height=”315″ src=”https://www.youtube.com/embed/qzOOy1tWBCg” frameborder=”0″ allowfullscreen></iframe>

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

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

在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类，如下所示：

<iframe class=”frame-border” width=”560″ height=”315″ src=”https://www.youtube.com/embed/qzOOy1tWBCg” frameborder=”0″ allowfullscreen></iframe>

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

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

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

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