在网站上添加视频将为您和您的网站访问者带来无与伦比的价值，这已经不是什么诀窍了。从增强用户体验--在我们的视觉驱动文化中，人们确实更喜欢观看而不是阅读--到为网站带来搜索引擎优化的好处。增加 网站停留时间、提高点击率、提高转化率，从而增加收入，这些都是在网站上嵌入视频的明显好处。全球许多网站设计公司都会证明，在网站上添加视频可以大大提升用户体验。

然而，在这种情况下，简单的上传并不能解决问题。将视频嵌入您的网站才是真正的出路。视频嵌入看似是一项常规工作，但其实并不那么简单。关于如何将视频从一个地方嵌入到另一个地方的信息太多了，我们的目标是创建 一份在网站上嵌入视频的终极指南，其中涵盖了所有内容。

让我们直奔主题！

什么是视频嵌入？

首先，必须了解视频嵌入的主要元素--嵌入代码--背后的含义。嵌入代码是一段HTML代码，您可以用它在网站上添加视频和其他类型的内容。

这段代码有助于在网站上显示视频。它从原始源中提取视频，而不会 "强制 "您将其托管到网站上。 这意味着您不必担心视频会影响网站的加载时间，而且还可以在各种视频托管服务中选择最适合您需求的服务。

虽然大多数视频托管服务都提供自动嵌入功能，但了解基本的视频嵌入代码结构也无妨：

<iframe src="URL'></iframe>

不需要 URL 部分，只需添加视频链接，然后就有了HTML 代码。懂一点 HTML 还能让你手动调整嵌入代码：添加所需的高度和宽度，或屏蔽你不想在页面上显示的视频的特定功能。它可以是这样的

这时你可能会问，为什么不能简单地把视频上传到网站上就完事了呢？谷歌经常说，视频会大大增加网站加载时间，降低网站速度，从而影响用户体验并对搜索引擎优化产生负面影响。因此，您可能会失去流量和排名等。更不用说服务器超载、额外费用等问题了。

在网站上嵌入视频可以帮助您克服大部分这些问题。原因如下。

嵌入而非上传：嵌入式视频的主要优势

1.在网站上嵌入视频，提高视频加载时间（和搜索引擎优化）

当您上传视频到网站时，视频可能需要很长时间才能加载，这反过来又会影响页面的加载时间。因此，网站访问者可能会遇到视频加载缓慢、意外暂停以及整体拒绝播放等问题。嵌入视频可以帮助你 保持网站速度的平衡，并且不会给用户体验带来负面影响。 而且，根据 Google John Mueller 的说法 ， 网站速度是移动优先时代的关键排名因素之一。

为什么要担心这个问题？以下图表显示了网站加载时间对转化率的影响：

来源：Crisp VideoCrisp Video

因此，从根本上说，较低的加载时间意味着较低的排名、较少的流量、较少的转换率以及......收入损失！

但不要以为添加视频只会给您带来麻烦。在网站上播放视频会大大影响人们在网站上停留的时间（积极的排名因素），而且视频本身可能会出现在谷歌的第一页，从而带来流量，以及随之而来的其他一切。因此，这只是一个正确操作和选择嵌入选项而不是上传的问题。

2.在网站上嵌入视频，克服带宽限制

上传视频会耗尽你自己服务器的带宽（这是有成本的）。而且每次有人在自己的网站上链接或嵌入您的视频时，您自己的网站也会受到影响，因为他们会再次占用您的带宽。这既昂贵又低效。

3.在网站上嵌入视频，以避免文件大小和存储限制

您的网站托管总是有存储限制的，因此，总的来说，每次上传视频都会占用服务器空间。上传多个视频可能会占用过多空间，如果多个用户同时观看您的视频，您的网站加载速度可能会大大降低。

此外，上传视频还有文件大小的限制。您的网站托管平台很可能对视频格式和文件大小有严格的限制，因此您会发现自己将视频压缩得毫无用处。而视频嵌入则不会有这些限制。

来源：ProPhoto来源：ProPhoto

4.在网站上嵌入视频，提高视频质量

从文件大小限制到视频质量限制，再到上传视频到网站。如果你想在自己的网站上显示辛苦制作的高质量视频，将其存储在第三方网站上可确保你的视频质量不超过 "inode 限制"，即在托管账户上保存文件信息的数据结构。这样，您就不必考虑将视频文件转换成多种格式和版本，让访客观看高清或低分辨率的视频。

选择视频托管网站

从根本上说，选择在网站上嵌入视频，就等于把所有服务器负载问题和文件格式更改问题留给了有时间和资源的人。 不过，正如你可能了解的那样，要在网站上嵌入视频，首先必须将其添加到第三方视频托管平台。在这里，您有很多选择。

视频主机的概念没有优劣之分，关键在于 如何平衡合适的功能和成本。 因此，我们总结了在选择合适的视频托管网站之前需要考虑的主要功能：

响应式播放器

您的视频托管网站应提供响应式视频播放器，这是一种移动友好型富媒体部件，旨在为受众提供最佳的用户和观看体验。无论他们是通过台式机屏幕、智能手机、平板电脑还是其他任何尺寸的屏幕观看，视频都会展开以填充屏幕宽度，但保持视频的原始纵横比。这有助于避免静态大小，因为静态大小可能会扭曲页面布局、使图像变形或在视频周围显示黑条。

服务速度和质量

在选择视频托管服务时，您要确保他们能提供最优质的服务。因此，我们要从两方面来理解什么是良好的速度和服务质量：

• 支持高视频质量： 2020 年，您真的无法承受 360p 或 480p 下的颗粒画面和动画。因此，除非您的预算很低，1080p 也能满足您的需求，否则请确保您选择的视频托管服务支持超高清或更高画质。最好的平台能让你在高清/标清质量之间自动切换。
• 强大的支持和客户服务： 仔细检查服务所使用服务器的质量。网站是否时常崩溃（这将影响网站的视频显示效果！）？是否容易受到 DDoS 攻击？更重要的是，他们对客户询问的平均响应时间是多少？

播放器配置选项

第一印象很重要，因此 视频播放器的设计首先要吸引您和客户的眼球 。从颜色到按钮、自动播放以及配置所有必要的命令，视频播放器的可定制性越高越好。

Wave.video 托管中的视频播放器定制选项

引导生成功能

如果您在网站上添加视频，它就会成为 您的潜在客户生成机器的一部分。 因此，请确保您选择的视频平台确实支持通过视频产生销售线索。该功能包括 "行动号召 "和获取访客（潜在客户）信息的方式。否则，它基本上就是一个你花钱买来的视频播放器。

隐私权

在网上操作时，隐私显然是一个需要考虑的因素。您的视频隐私也是如此。重要的是，您选择的视频托管平台不允许所有人在未经您允许的情况下观看或下载您的视频。 因此，托管服务应为您提供严格的下载规则和有效的执行方式。使用密码保护视频的功能也是选择视频托管平台时需要注意的一项功能。

搜索引擎优化

如果你想利用自己网站的排名，就应该战略性地选择视频托管平台。寻找一个既稳定又受欢迎的托管服务（比如本身排名就很高），并 利用它们在谷歌排名中的份额。 首先，将视频托管到外部网站可以为您提供外链或 反向链接 ，并有可能使您自己的域名更容易获得富视频片段。 因此，这也会给您带来影响网站排名的机会。

来源Moz

分析和数据收集

您的视频旨在吸引和取悦客户，因此您自然希望了解客户的满意程度。因此，您的视频托管服务应该提供大量分析数据供您查看。这不仅仅是浏览量、评论等简单的数据，而是完全不同的复杂数据。 通过嵌入视频，您可以 从 Google 标签管理器中添加特殊的跟踪代码 ，并在 Google Analytics 账户中获得额外的分析数据，如平均观看时间、人们停止观看的时间等。您需要所有这些数据来了解您的视频是如何以及为什么成功（或不成功）。

费用

在确保考虑了所需的所有功能、对平台和支持感到满意、对视频质量有所了解后，最后一件事就是确保平台在您的预算范围内。这取决于您预计的视频浏览量以及视频文件的大小。大型视频的观看次数越多，意味着使用的带宽越多，因此价格也会增加。此外，平台是否允许签订包月或包年合同也值得确认。如果您是小企业或刚刚开始使用视频，您可能不希望被长期合同束缚。

如何生成嵌入代码

一旦您选择了视频托管平台并上传了所有视频内容，您就可以在网站上添加/嵌入视频了，这中间只差一步--找到嵌入代码。

从视频托管服务中嵌入视频

从 Wave.video 嵌入

要嵌入 Wave.video 中的视频，请进入 " 我的项目 "，找到要嵌入的视频。然后，将鼠标悬停在三点图标上，点击"播放器"。

打开 "嵌入视频 "开关，Wave.video 就会自动生成视频的嵌入代码。在切换按钮下，您还可以找到视频大小设置，因此不要忘记使用这一功能。

要自定义视频播放器，请打开 "外观 "选项卡，随意更改播放器颜色、定义显示的控件（如有）或选择自定义缩略图。如果您想了解有关 Wave.video托管功能的更多信息，请务必阅读本文。

在网站或博客上使用 Wave.video 嵌入视频有多种选择。

• 内嵌

这是一种常规嵌入方式，可将视频嵌入到页面的文本或其他用户界面元素中。

• 弹出式嵌入

以这种方式嵌入视频时，视频会在弹出其他内容的模式对话框中打开。

将视频整合到页面内容中有三种方法：缩略图、高亮显示和文本链接。

从 YouTube 嵌入

只需进入视频的 YouTube 播放页面，点击 "分享 "按钮，然后点击 "嵌入 "即可。你可以直接复制嵌入代码，也可以设置一些自定义选项--显示/覆盖播放器控件或从某一点（不一定是开头）开始播放视频。

如果你想进一步自定义，可以在 iframe 嵌入中添加自动播放、颜色、语言、循环播放等大量参数。 谷歌开发者页面上列出了所有这些 参数。

从 Vimeo 嵌入

点击视频右侧的 "分享 "图标，即可找到 Vimeo 嵌入代码。你会看到一个窗口，里面有各种框架，其中一个就是你的嵌入代码。

点击 "+Show Options"（+显示选项），您就可以通过嵌入代码自定义视频的显示方式。您可以更改播放器的颜色、大小（为以防万一，请保持响应式）、添加介绍，以及添加一些 "特殊功能"，如循环播放、自动播放等。

如果选择专业版、商务版或高级版，您还可以看到一些额外的功能，如自定义颜色和组件、添加终端屏幕和徽标。

从 Wistia 嵌入

进入媒体页面，点击 "嵌入与共享 "按钮。你会看到一个 "嵌入与分享 "页面，在这里你可以复制嵌入代码类型，并根据你的页面进行修改。

Wistia 提供两种类型的嵌入代码：内嵌和弹出嵌入。内嵌代码意味着将视频与您的其他内容放在一起，而弹出式嵌入代码则帮助您的视频在页面内容上弹出。

从 Vidyard 嵌入

请注意，要从 Vidyard 嵌入视频，您的计划中必须包含播放器嵌入功能。Vidyard 支持两种嵌入选项--响应式嵌入和 iframe 嵌入。

在 Vidyard 的仪表板上，单击 "内容">"播放器 "部分，将光标悬停在播放器上，然后单击 "共享"。在 "响应式嵌入 "部分，只需点击 "复制代码"图标，然后选择 "使用灯箱 "选项，即可将代码转化为灯箱嵌入。您可以手动输入播放器尺寸，以获得最大宽度和高度。

如果您的网站不支持 JavaScript，您可以选择 "麻烦嵌入？"复选框，然后复制 iframe 嵌入代码。

从社交媒体 嵌入视频

从 Facebook 嵌入

Facebook 上的每个视频都支持嵌入功能。您只需点击 Facebook 帖子右上角的"..."，然后按 "嵌入"。

如果你愿意，可以选择 "包含完整帖子 "选项（只需按下复选框），它就会将 Facebook 帖子中的相应文本与视频一起添加进来。

从 Instagram 嵌入

由于 Instagram 属于 Facebook，因此嵌入过程非常相似。从桌面（而非应用）打开 Instagram，点击右上角的"..."。

点击 "嵌入 "并复制嵌入代码。同样，您也可以选择在嵌入时添加（或不添加）标题。

从 Twitter 嵌入

要嵌入 Twitter 视频，请不要使用应用程序。在桌面上打开推特，从推特上 "关注 "按钮旁边的下拉菜单中选择 "嵌入推特"。然后，选择 "嵌入推特 "选项。

只需复制/粘贴嵌入代码--但请注意，Twitter 的嵌入将显示整条 Tweet 和标题，没有显示单个视频的选项。

从 TikTok 嵌入

有了 TikTok，"获取嵌入代码"按钮就会出现在视频上。虽然没有任何选项可供选择，您得到的只是一个 340×700自动播放播放器的链接，但您可以在将嵌入代码添加到网页时调整一些设置。

使用替代方法：视频嵌入代码生成器

如果出于某种原因，您不想按照简单的步骤从视频托管网站或社交媒体获取视频的嵌入代码，当然也有变通的办法。

还有一种替代方法--你可以找到很多专门的网站，它们本身就是视频嵌入代码生成器。 Embed.ly、 Toolki 和 Siege Media 等平台 允许你为视频生成嵌入代码：你只需准备好视频的 URL，这些网站就会自动为你的视频创建嵌入代码。

不过，这种变通方法也有一些缺陷：

• 通常，您网站上新嵌入的视频会带有平台的水印
• 视频定制功能非常有限
• 这些平台不提供任何分析功能，甚至无法添加跟踪代码，以便在 Google Analytics 或第三方分析平台上进一步跟踪视频的统计数据。

因此，如果您有机会使用视频托管平台，一定要选择这种方式。

第五部分：如何在网站上嵌入视频

现在，您已经了解了视频嵌入的优势，知道了如何选择合适的视频托管服务以及如何生成嵌入代码，下面我们将带您快速了解如何在最流行的网站托管平台上嵌入视频。

在 HTML 中嵌入视频

步骤 1：编辑 HTML

在编辑模式下打开要嵌入视频的页面。在代码中选择您希望视频出现的准确位置，并将光标放在此处。

步骤 2：复制并粘贴嵌入代码

复制嵌入代码并粘贴到光标所在位置。按下 "保存 "或 "发布"，就可以了。

仔细检查视频是否准确地显示在您放置代码的位置，不要忘记监控页面和视频的性能。

在WordPress中嵌入视频

如果您的网站使用WordPress，有两种嵌入视频的选择。

#1 选项：复制/粘贴网址

对于 Vimeo、YouTube 等最流行的视频托管平台，你无需查找完整的嵌入代码。只需复制视频的 URL 并粘贴到 Visual编辑器中，嵌入代码就会自动生成。

#2 选项：使用嵌入代码

有时，您想对视频显示添加一些调整，或者您的视频托管平台不支持WordPress的自动嵌入。这时，您就必须使用视频的嵌入代码。

进入 WordPress文本编辑器（不要与可视化编辑器混淆），你会看到页面的 HTML 版本。然后，只需按照本指南 HTML 部分中提到的步骤，在网站上嵌入视频即可。

在 Shopify 中嵌入视频

步骤 1：复制嵌入代码

第一步非常简单，只需复制视频所在位置的嵌入代码即可。

步骤 2：登录您的 shopify 管理仪表板

登录您的 Shopify 管理面板。所有当前页面都应列在在线商店 -> 页面下。导航到您要编辑的页面，注意编辑器工具栏上的符号。

步骤 3：点击 "插入视频 "按钮

选择富文本编辑器，然后在工具栏中点击摄像机图标。这时会弹出一个新窗口--只需粘贴视频的嵌入代码，然后选择 "插入视频 "选项即可。就这样！

在 Squarespace 中嵌入视频

在嵌入方面，Squarespace 与WordPress 非常相似。您可以选择使用嵌入代码，或者通过复制/粘贴视频的 URL 来嵌入视频（只有从 YouTube、Vimeo、Animoto 或 Wistia 嵌入时才可行）。

由于 Squarespace 是一个网站建设工具，因此只需添加任何支持视频的区块，然后复制/粘贴视频 URL，或按下嵌入图标（用红圈标出），就会弹出一个窗口，在此复制/粘贴嵌入代码。

在 Squarespace 中，您可以调整视频的标题和描述，取消选中 "使用缩略图 "选项，还可以在该页面上为视频添加自定义缩略图。

在 Wix 中嵌入视频

Wix 的运行原理与之前的网站托管平台类似。只有用于视频嵌入的复制/粘贴 URL 选项支持 YouTube、Vimeo、DailyMotion 和 Facebook 上托管的视频。

#1 选项： 复制/粘贴网址

步骤 1：打开编辑器

点击编辑器左侧的 "+"图标，选择视频。在 "单个视频播放器 "下，选择视频所在的平台--YouTube、Vimeo、DailyMotion 或 Facebook。

第 2 步：复制视频 URL

点击 "更改视频 "并复制你想展示的视频的 URL。在这一步，你可以调整播放和控制选项。

第 3 步：调整视频位置

使用拖放功能更改视频的位置和大小。然后保存页面即可！

#2 选项：使用嵌入代码

如果您没有在 Wix 支持的平台上托管视频，则需要复制视频的嵌入代码。然后，不要选择添加视频，而是点击 "更多"。在这里您可以找到 HTML iframe，并在其中粘贴嵌入代码。按下 "保存"，就可以了。

最后的话

似乎我们已经介绍了与在网站上嵌入视频有关的所有内容。在进行了如此广泛的阅读之后，我们要说的是，在网站上添加视频不仅能为您的搜索引擎优化、分析和收入部门带来价值。人们喜欢视频，并欣赏你花时间创建有价值、娱乐性强且易于消化的内容。您只 需 确保您的视频不会影响用户体验，而视频嵌入就是一个很好的工具。

如果您希望我们在本指南中添加任何内容，请在评论中告诉我们。哪些问题还没有得到解答？您希望我们更新本指南中的哪些视频托管平台或网站托管服务？ 在将视频嵌入网站并提供最佳用户体验方面，您遇到过 哪些 困难和挑战？