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

12/17/2023

在WordPress中的iframe视频添加边框

首先,你需要打开一个包含iframe视频嵌入代码的文章或页面。典型的iframe嵌入代码如下:

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

只需更改边框的宽度以及颜色,你就完成了。

虽然添加iframe边框可以工作,但实际上有一种更好的方法可以在WordPress中为视频添加边框,那就是使用oEmbed。

在WordPress中的oEmbed视频添加边框

WordPress自带oEmbed支持。基本上WordPress允许你粘贴视频链接,它会自动获取嵌入代码。现在这仅适用于启用了oEmbed支持的网站,如YouTube、Vimeo、DailyMotion、Hulu等。

既然你知道如何使用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类,如下所示:

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

你也可以在oEmbed视频URL周围的span标签中使用相同的CSS类,如下所示:

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

使用单个CSS类的好处是,如果你以后更改主题,你可以轻松更改颜色,而无需逐个编辑每个视频。

我们希望这篇文章能帮助你在WordPress中为视频嵌入添加iframe边框。你可能还想查看这9个实用的YouTube技巧,以便为你的网站添加视频内容。



Related Posts

  • 2025-02-16
  • WordPress 教学

你是否想过,能不能用更引人注目的方式取代WooCommerce中基本的促销徽章?答案是肯定的!通过自定义产品徽章,你可以在在线商店中突出新产品、折扣商品或限时优惠。在这篇文章中,我们将展示给你两个简单的方法,使用强大的插件或添加简单代码来为你的WooCommerce商店添加自定义产品徽章。

閱讀更多
  • 2025-01-18
  • WordPress 教学

我们都知道推荐计划是强大的武器。但要找到真正的品牌代言者并不容易。许多计划吸引的只是想快速赚钱的人,导致非真实的推广,无法有效转化客户。幸好,作为 WooCommerce 商店的店主,您有一个巨大的优势:一群真正喜爱和使用您产品的内置客户群。通过将这些现有客户转化为推广合伙人,您可以释放真实口碑营销的力量。

閱讀更多
  • 2025-01-10
  • WordPress 教学

最近,我们的一位比利时读者在其在线商店中苦于销售增长缓慢。除了其他建议外,我们建议他们在网站上设置Bancontact支付。Bancontact是一种主要在比利时使用的流行支付系统,客户可以通过银行账户进行安全的实时支付。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>