您想在嵌入的视频周围添加 iframe 边框吗？最近，一位用户向我们询问一种在 WordPress 中为他们的视频添加边框的方法。由于您可以使用 iframe 和 oEmbed 在 WordPress 中添加视频，因此我们将向您展示如何在视频嵌入周围添加 iframe 边框以及如何在 WordPress 中在 oEmbed 视频周围添加边框。
视频教程
https://www.youtube.com/embed/vPuJzYfTbx0?version=3&rel=0&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent订阅 WPBeginner
https://www.youtube.com/subscribe_embed?usegapi=1&channel=wpbeginner&layout=default&count=default&origin=https%3A%2F%2Fwpbeginner.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.vQiXRrxCe40.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCMBxIGVyXSdvvcs43a64yHt_P7dfg%2Fm%3D__features__#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1448178294715&parent=https%3A%2F%2Fwpbeginner.com
如果您不喜欢该视频或需要更多说明，请继续阅读。
在 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 类添加到主题的样式表中。
| 123 | .frame-border { border:3pxsolid#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 技巧，通过视频为您的 WordPress 网站增添趣味。
