0

0

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

舞夢輝影

舞夢輝影

发布时间:2025-04-25 20:08:49

|

313人浏览过

|

来源于php中文网

原创

您想在嵌入的视频周围添加 iframe 边框吗?最近,一位用户向我们询问一种在 wordpress 中为他们的视频添加边框的方法。由于您可以使用 iframe 和 oembed 在 wordpress 中添加视频,因此我们将向您展示如何在视频嵌入周围添加 iframe 边框以及如何在 wordpress 中在 oembed 视频周围添加边框。

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

视频教程

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=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.vQiXRrxCe40.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCMBxIGVyXSdvvcs43a64yHt_P7dfg%2Fm%3D__features__#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1448178294715&parent=https%3A%2F%2Fwpbeginner.com

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

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

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

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

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

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

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

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

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

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

Digram
Digram

让Figma更好用的AI神器

下载

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

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

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

.frame-border { border:3pxsolid#EEE; }

在 WordPress 中一键使用

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

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

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

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

我们希望本文能帮助您在 WordPress 中的视频嵌入周围添加 iframe 边框。您可能还想了解这 9 个有用的YouTube 技巧,通过视频为您的 WordPress 网站增添趣味。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

198

2023.11.20

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

469

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

13

2025.12.06

Golang channel原理
Golang channel原理

本专题整合了Golang channel通信相关介绍,阅读专题下面的文章了解更多详细内容。

248

2025.11.14

golang channel相关教程
golang channel相关教程

本专题整合了golang处理channel相关教程,阅读专题下面的文章了解更多详细内容。

344

2025.11.17

default gateway怎么配置
default gateway怎么配置

配置default gateway的步骤:1、了解网络环境;2、获取路由器IP地址;3、登录路由器管理界面;4、找到并配置WAN口设置;5、配置默认网关;6、保存设置并退出;7、检查网络连接是否正常。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

221

2023.12.07

html边框设置教程
html边框设置教程

本教程将带你全面掌握HTML/CSS边框设置,从基础的border属性讲起,涵盖所有边框样式、圆角设置及高级技巧,帮助你快速上手实现各种边框效果。

35

2025.09.02

http500解决方法
http500解决方法

http500解决方法有检查服务器日志、检查代码错误、检查服务器配置、检查文件和目录权限、检查资源不足、更新软件版本、重启服务器或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

413

2023.11.09

Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

10

2026.01.27

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

CSS教程
CSS教程

共754课时 | 24.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号