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

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

IFRAME Border around WordPress Videos

视频教程

订阅WPBeginner

如果您不喜欢该视频或需要更多说明，请继续阅读。

在WordPress中添加iframe视频边框

您需要做的第一件事就是打开包含iframe视频嵌入代码的帖子或页面。典型的iframe嵌入代码应如下所示：

＆lt; iframe width =“560”height =“315”src =“https://www.youtube.com/embed/qzOOy1tWBCg”frameborder =“0“allowfullscreen＆gt;＆lt; / iframe＆gt;

您可以通过在代码中添加内联样式来在其周围添加边框：

＆lt; iframe style =“border：3px solid #EEE;”width =“560”height =“315”src =“https://www.youtube.com/embed/qzOOy1tWBCg”frameborder =“0”allowfullscreen＆gt;＆lt; / iframe＆gt;

An iframe video embed with border around it

只需更改宽度边框和颜色，你已经完成。

虽然添加iframe边框有效，但实际上有更好的方法在WordPress中添加视频边框。这是通过使用oEmbed。

在WordPress中为oEmbed视频添加边框

WordPress带有内置的oEmbed支持。基本上WordPress允许您粘贴视频的链接，它将自动获取它们的嵌入代码。现在这仅适用于支持oEmbed的网站，例如YouTube，Vimeo，DailyMotion，Hulu等。（请参阅：如何使用oEmbed在WordPress中轻松添加视频）

现在您已了解如何使用oEmbed添加视频，以下是如何在WordPress中为oEmbed视频添加边框的方法。

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

＆lt; span style =“border：3px solid #EEE;”＆gt; http：//www.youtube.com/watch？v = qzOOy1tWBCg＆lt; / span＆gt;

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

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

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

＆lt; iframe class =“frame-border”width =“560”height =“315”src =“https://www.youtube.com/embed/qzOOy1tWBCg“frameborder =”0“allowfullscreen＆gt;＆lt; / iframe＆gt;

您还可以在oEmbed视频网址的span标记中使用相同的CSS类，像这样：

＆lt; span class =“frame-border”＆gt; http：//www.youtube.com/watch？v = qzOOy1tWBCg＆lt; / span＆gt;

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

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