您想在嵌入的视频周围添加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;}