You are here:  Home » PHP » 如何在视频嵌入周围添加iframe边框

是否要在视频嵌入周围添加iframe边框?最近,用户要求我们在WordPress中为他们的视频添加边框。由于您可以同时使用iframe和oEmbed在WordPress中添加视频,因此我们将向您展示如何在嵌入的视频周围添加iframe边框以及如何在WordPress中添加oEmbed视频边框。

IFRAME Border around WordPress Videos

视频教程

订阅WPBeginner

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

在WordPress中添加iframe视频边框

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

lt; 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>

An iframe video embed with border around it

只需更改宽度边框和颜色,你已经完成。

虽然添加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类添加到主题的样式表中。

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

现在您可以在iframe嵌入代码中使用CSS类,如下所示:

lt; iframe class =“frame-borderwidth =“560”height =“315”src =“https://www.youtube.com/embed/qzOOy1tWBCg“frameborder =”0“allowfullscreen>< / iframe>

您还可以在oEmbed视频网址的span标记中使用相同的CSS类,像这样:

< span class =“frame-border”> http://www.youtube.com/watch?v = qzOOy1tWBCg< / span>

使用的好处单个CSS类是如果您稍后更改主题,那么您只需单击一下即可轻松更改颜色,然后返回并单独编辑每个视频。

我们希望这篇文章可以帮助您在嵌入WordPress的视频周围添加iframe边框。您可能还希望看到这9个有用的YouTube提示,以便通过视频为您的WordPress网站增添趣味。

评论被关闭。