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

   2025-07-15 admin00110

您想在嵌入的视频周围添加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="https://www.yaozhongpeng.com/static/image/lazy.gif" class="lazy" original="https://www.yaozhongpeng.com/static/image/nopic320.png">

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

在WordPress中的iframe视频周围添加边框

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

您可以通过向代码添加内联样式来在其周围添加边框,如下所示:

只需更改边框的宽度和颜色,即可完成。

虽然添加iframe边框有效,但实际上有一种更好的方法可以在WordPress中的视频周围添加边框。这是通过使用oEmbed实现的。

在WordPress中的oEmbed视频周围添加边框

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

现在您已经知道如何使用oEmbed添加视频,以下是如何在WordPress中为oEmbed视频添加边框。

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

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

如果您想在所有视频iframe周围添加相同的边框,那么最好将CSS类添加到主题的样式表中。

.frame-border{border:3pxsolid#EEE;}
 
举报收藏 0打赏 0评论 0
 
更多>同类资讯
推荐图文
推荐资讯
点击排行
网站首页  |  关于我们  |  联系方式  |  用户协议  |  隐私政策  |  版权声明  |  网站地图  |  RSS订阅
Powered By DESTOON