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

<iframe 嵌入视频

Do you want to add an iframe border around your video embed? Recently a user asked us for a way to add a border around their videos in WordPress. Since you can use both iframe and oEmbed to add videos in WordPress, we will show you how to add an iframe border around a video embed as well as how to add a border around oEmbed videos in WordPress.

您是否要在嵌入的视频周围添加iframe边框？ 最近，一位用户要求我们提供一种在WordPress中的视频周围添加边框的方法。 由于您可以同时使用iframe和oEmbed在WordPress中添加视频，因此我们将向您展示如何在嵌入的视频周围添加iframe边框，以及如何在WordPress中为oEmbed视频添加边框。

影片教学 (Video Tutorial)

演示地址

If you don’t like the video or need more instructions, then continue reading.

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

在WordPress中为iframe视频添加边框 (Adding Border Around iframe Videos in WordPress)

First thing you need to do is to open a post or page containing your iframe video embed code. A typical iframe embed code should looks something like this:

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

<iframe width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>

<iframe width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>

You can add a border around it by adding inline style to the code like this:

您可以通过向代码中添加内联样式来在其周围添加边框：

<iframe style="border: 3px solid #EEE;" 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>

Simply change the width of the border as well as the color, and you’re done.

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

While adding an iframe border works, there is actually a better way to add a border around videos in WordPress. That’s by using oEmbed.

在添加iframe边框的同时，实际上还有一种更好的方法来在WordPress中的视频周围添加边框。 那是通过使用oEmbed。

在WordPress中的嵌入视频周围添加边框 (Adding Border Around oEmbed Videos in WordPress)

WordPress comes with built-in oEmbed support. Basically WordPress allows you to paste the link of the video, and it will automatically get the embed code for them. Now this only works for oEmbed enabled sites such as YouTube, Vimeo, DailyMotion, Hulu, etc. (See: how to easily add videos in WordPress using oEmbed)

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

Now that you know how to add a video with oEmbed, here is how you can add a border around oEmbed videos in WordPress.

既然您知道如何使用oEmbed添加视频，下面就是在WordPress中如何在oEmbed视频周围添加边框的方法。

When adding a video using oEmbed, simply wrap the URL in span tag with inline style parameters, like this:

使用oEmbed添加视频时，只需使用内联样式参数将网址包装在span标签中，如下所示：

<span style="border:3px solid #EEE;">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>

<span style="border:3px solid #EEE;">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>

If you want to add a same border around all video iframes, then it would be best to add a CSS class to your theme’s stylesheet.

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

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

Now you can use the CSS class in your iframe embed code like this:

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

<iframe class="frame-border" width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>

<iframe class="frame-border" width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>

You can also use the same CSS class in the span tag around your oEmbed video URLs, like this:

您还可以在oEmbed视频网址周围的span标签中使用相同CSS类，如下所示：

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

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

The benefit of using a single CSS class is that if you change themes later, then you can easily change the colors with one click vs going back and editing each video individually.

使用单个CSS类的好处是，如果以后更改主题，则只需单击一下即可轻松更改颜色，而后退并分别编辑每个视频。

We hope this article helped you add an iframe border around a video embed in WordPress. You may also want to see these 9 useful YouTube tips to spice up your WordPress site with videos.

我们希望本文能帮助您在嵌入WordPress的视频周围添加iframe边框。 您可能还想看一下这9个有用的YouTube技巧，以通过视频为WordPress网站增光添彩 。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/wp-tutorials/how-to-add-an-iframe-border-around-a-video-embed/

<iframe 嵌入视频