您想在嵌入的視頻周圍添加 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

如果您不喜歡該視頻或需要更多說明，請繼續(xù)閱讀。

在 wordpress 中的 iframe 視頻周圍添加邊框

您需要做的第一件事是打開包含 iframe 視頻嵌入代碼的帖子或頁面。典型的 iframe 嵌入代碼應(yīng)如下所示：

您可以通過向代碼添加內(nèi)聯(lián)樣式來在其周圍添加邊框，如下所示：

只需更改邊框的寬度和顏色，即可完成。

雖然添加 iframe 邊框有效，但實(shí)際上有一種更好的方法可以在 WordPress 中的視頻周圍添加邊框。這是通過使用 oEmbed 實(shí)現(xiàn)的。

在 WordPress 中的 oEmbed 視頻周圍添加邊框

WordPress 帶有內(nèi)置的 oEmbed 支持。基本上，WordPress 允許您粘貼視頻的鏈接，它會自動獲取它們的嵌入代碼。現(xiàn)在，這只適用于支持 oEmbed 的網(wǎng)站，例如 youtube、Vimeo、DailyMotion、Hulu 等（請參閱：如何使用 oEmbed 在 WordPress 中輕松添加視頻）

現(xiàn)在您已經(jīng)知道如何使用 oEmbed 添加視頻，以下是如何在 WordPress 中為 oEmbed 視頻添加邊框。

使用 oEmbed 添加視頻時(shí)，只需使用內(nèi)聯(lián)樣式參數(shù)將 URL 包裝在 span 標(biāo)記中，如下所示：

http://www.youtube.com/watch?v=qzOOy1tWBCg

如果您想在所有視頻 iframe 周圍添加相同的邊框，那么最好將 css 類添加到主題的樣式表中。

.frame-border { border:3pxsolid#EEE; }

由

在 WordPress 中一鍵使用

現(xiàn)在您可以在 iframe 嵌入代碼中使用 CSS 類，如下所示：

您還可以在 oEmbed 視頻 URL 周圍的 span 標(biāo)記中使用相同的 CSS 類，如下所示：

http://www.youtube.com/watch?v=qzOOy1tWBCg

使用單個(gè) CSS 類的好處是，如果您稍后更改主題，則只需單擊一下即可輕松更改顏色，而不是返回并單獨(dú)編輯每個(gè)視頻。

我們希望本文能幫助您在 WordPress 中的視頻嵌入周圍添加 iframe 邊框。您可能還想了解這 9 個(gè)有用的YouTube 技巧，通過視頻為您的 WordPress 網(wǎng)站增添趣味。