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

是否要在视频嵌入周围添加iframe边框？最近，用户要求我们在WordPress中为他们的视频添加边框。由于您可以同时使用iframe和oEmbed在WordPress中添加视频，因此我们将向您展示如何在嵌入的视频周围添加iframe边框以及如何在WordPress中添加oEmbed视频边框。

在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添加视频，以下是如何在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视频网址的span标记中使用相同的CSS类，像这样：

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

使用的好处单个CSS类是如果您稍后更改主题，那么您只需单击一下即可轻松更改颜色，然后返回并单独编辑每个视频。

我们希望这篇文章可以帮助您在嵌入WordPress的视频周围添加iframe边框。您可能还希望看到这9个有用的YouTube提示，以便通过视频为您的WordPress网站增添趣味。