如何在視頻嵌入周圍添加iframe邊框


您是否要在嵌入的視頻周圍添加iframe邊框? 最近,一位用戶要求我們提供一種在WordPress中的視頻周圍添加邊框的方法。 由於您可以同時使用iframe和oEmbed在WordPress中添加視頻,因此我們將向您展示如何在嵌入的視頻周圍添加iframe邊框以及如何在WordPress中為oEmbed視頻添加邊框。

WordPress視頻周圍的IFRAME邊框

影片教學

訂閱WPBeginner

如果您不喜歡該視頻或需要更多說明,請繼續閱讀。

在WordPress中為iframe視頻添加邊框

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

您可以通過向代碼添加內聯樣式來在其周圍添加邊框:

內嵌邊框的iframe視頻

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

在添加iframe邊框的同時,實際上還有一種更好的方法來在WordPress中的視頻周圍添加邊框。 那是通過使用oEmbed。

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

WordPress帶有內置的oEmbed支持。 基本上,WordPress允許您粘貼視頻的鏈接,它將自動獲取視頻的嵌入代碼。 現在,這僅適用於啟用了oEmbed的網站,例如YouTube,Vimeo,DailyMotion,Hulu等。(請參閱:如何使用oEmbed在WordPress中輕鬆添加視頻)

既然您知道如何使用oEmbed添加視頻,下面就是在WordPress中如何在oEmbed視頻周圍添加邊框的方法。

使用oEmbed添加視頻時,只需使用內聯樣式參數將網址包裝在span標籤中,如下所示:

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

如果您想在所有視頻iframe周圍添加相同的邊框,則最好在主題的樣式表中添加CSS類。

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

現在,您可以像這樣在iframe嵌入代碼中使用CSS類:

您還可以在oEmbed視頻網址周圍的span標籤中使用相同的CSS類,如下所示:

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

使用單個CSS類的好處是,如果以後更改主題,則只需單擊一下即可輕鬆更改顏色,而後退並分別編輯每個視頻。

我們希望本文能幫助您在嵌入WordPress的視頻周圍添加iframe邊框。 您可能還想看一下這9個有用的YouTube技巧,以通過視頻為WordPress網站增光添彩。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。