close menu

在你的网站上嵌入视频的终极指南

在你的网站上添加视频会给你和你的网站访问者带来一些真正的无可比拟的价值,这已经不是什么诀窍了。从增强用户体验--在我们视觉驱动的文化中,人们确实更喜欢观看而不是阅读--到给你的网站带来搜索引擎的好处。增加 在网站上的时间,提高点击率,提高转换率,从而提高收入,都是在网站上嵌入视频的明显好处。

embed your video on website gif

然而,在这种情况下,简单的上传并不能解决问题。将视频嵌入到你的网站才是真正的办法。视频嵌入似乎是一项常规工作,然而,它并不那么明确。关于如何将视频从一个地方嵌入到另一个地方,这里有这么多信息,我们的目标是创建 一个在网站上嵌入视频的终极指南,它涵盖了所有的内容。

让我们直接跳入!

第一部分:什么是视频嵌入?

首先,重要的是要了解视频嵌入的主要元素背后是什么--嵌入代码。嵌入代码是一段HTML代码,你可以用它来将视频和其他类型的内容添加到你的网站。

嵌入代码一段HTML代码,你可以用它来将视频和其他类型的内容添加到你的网站。

这段代码有助于在你的网站上显示视频。它从其原始来源提取视频,而实际上没有 "强迫 "你将其托管在你的网站上。 这意味着你不必担心视频会影响你的网站加载时间,而且它还在各种视频托管服务中开辟了一系列最适合你需要的选择。

虽然大多数视频托管服务提供自动嵌入生成,但了解基本的视频嵌入代码结构也无妨。

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

而不是URL部分,只需添加视频的链接,瞧,这就是你的HTML代码。了解一点HTML也可以让你手动调整嵌入代码:添加所需的高度和宽度,或阻止你不想在页面上显示的视频的特定功能。它可以看起来像这样。

Example of an embed code

这时你可能会想--为什么你不能简单地把视频上传到你的网站上,就能解决这个麻烦?谷歌经常说,视频会增加大量的网站加载时间,降低网站速度,从而影响用户体验,对你的SEO产生负面影响。因此,你可能会失去流量、排名等等。更不用说服务器过载、额外费用等问题了。

在网站上嵌入视频将帮助你克服大部分的这些问题。原因就在这里。

轻松地嵌入你的视频

使用Wave.video主机现在就试试

第二部分:嵌入不要上传。嵌入视频的关键优势

1.在网站上嵌入视频,以提高视频加载时间(和SEO)。

当你上传视频到你的网站时,你的视频可能需要很长时间来加载,这反过来又会影响到页面的加载时间。因此,你的网站访问者可能会经历缓慢的视频加载,意外的停顿,以及整体的拒绝播放。嵌入视频可以帮助你 将网站速度保持在一个平衡的速度,并且不会给用户体验带来负面影响。 而且,根据 谷歌的约翰-穆勒(John Mueller), 在我们这个移动优先的时代,网站速度是关键的排名因素之一。

你为什么要担心这个问题呢?这里有一个图表,显示了网站加载时间对转换率的影响。

Loading time impact on conversion

资源。脆皮视频

因此,基本上,较低的加载时间意味着较低的排名、减少的流量、较少的转换率,以及......损失的收入!"。

但不要以为添加视频只会给你带来麻烦。在你的网站上播放视频将大大影响人们在你的网站上花费的时间(积极的排名因素),同时,视频本身也可能出现在谷歌的第一页上,从而带来流量,以及其他所有随之而来的东西。因此,这一切都只是一个正确的做法,选择嵌入选项而不是上传的问题。

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

上传视频会耗尽你自己服务器的带宽(这是有代价的)。而每次有人在他们的网站上链接或嵌入你的视频时,你自己的网站就会受到影响,因为他们又一次占用了你的带宽。这是很昂贵和低效的。

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

你的网站托管总是有一个存储限制--所以,大体上,每次你上传视频,你都在占用你的服务器空间。通过上传多个视频,你有可能占用过多的空间,如果多个用户同时观看你的视频,你的网站加载时间可能会急剧减慢。

此外,视频上传还有一个文件大小的限制问题。你的网站托管平台很可能对视频格式和文件大小有严格的限制,所以你会发现自己把视频压缩到没有用的地步。视频嵌入不会让你受到这些限制。

Embed video on website - Upload size limit

来源。淘宝网

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

从文件大小的限制,我们正在进入视频质量的限制,当它涉及到上传视频到一个网站。如果你想在你的网站上显示你的高质量的辛勤工作的视频,把它存储在第三方网站上可以确保你将保持在你的 "inode限制 "之内,这个数据结构在你的主机账户上保存文件的信息。因此,你不必考虑将你的视频文件转换为多种格式和版本,让你的访问者以高清晰度或较低的分辨率观看你的视频。

第三部分:选择一个视频托管网站

基本上,通过选择将视频嵌入你的网站,你将所有服务器负载的烦恼和文件格式的改变留给那些有时间和资源的人。 但是,正如你可能理解的那样,要将视频嵌入你的网站,你必须首先将其添加到第三方视频托管平台。而在这里,你有很多选择。

没有最好或最坏的视频主机概念,这实际上是一个 正确的功能和成本的平衡问题 因此,我们总结了在选择合适的视频托管网站之前需要考虑的关键功能。

响应式播放器

你的视频托管网站应该提供一个响应式的视频播放器,一个移动友好的富媒体部件,旨在为你的观众提供最大的用户和观看体验。无论他们是否从桌面屏幕、智能手机、平板电脑或任何其他屏幕尺寸观看,视频都会扩展以填补屏幕的宽度,但保持视频的原始长宽比。这有助于避免静态尺寸可能扭曲页面布局,使图像变形,或在视频周围显示黑条。

服务的速度和质量

当你选择一个视频托管时,你要确保他们提供最大的服务。因此,对于良好的速度和服务质量意味着什么,有两方面的理解。

  • 支持伟大的视频质量。 在2020年,你真的无法承受360p或480p的颗粒状的镜头和动画。因此,除非你的预算很低,1080p可以满足你的目的,否则要确保你选择的视频托管服务支持超高或更多。最好的平台为你提供在高清/标清质量之间自动切换。
  • 伟大的支持和客户服务。 仔细检查该服务所使用的服务器的质量。该网站是否时常崩溃(这将影响你网站上的视频显示!)?它是否容易受到DDoS攻击?而且,更重要的是,他们对客户的询问的平均响应时间是多少?

球员配置选项

第一印象很重要,所以吸引你和你的客户眼球的第一件事就是 视频播放器的设计。从颜色到按钮、自动播放和配置所有必要的命令--视频播放器的可定制性越强越好。

Video Player customization in Wave.video

Wave.video 主机中的视频播放器定制选项

线索生成功能

如果你在你的网站上添加一个视频,它就会成为 你潜在客户生成机器的一部分。 因此,确保你所选择的视频平台实际上支持通过视频来产生线索。这个功能包括像呼吁行动和捕捉你的访客(线索)信息的方法。否则,它基本上就是一个你付钱的视频播放器。

隐私

在网上操作时,隐私是一个明显要考虑的因素。这同样适用于你的视频的隐私。重要的是,你选择的视频托管平台不允许每个人在没有你的允许下观看或下载你的视频。 因此,托管服务应该让你选择对下载东西施加严格的规则,以及执行这些规则的有效方法。用密码保护你的视频的能力是选择视频托管平台时要寻找的一个功能。

搜索引擎优化

如果你想玩弄自己网站的排名,你在选择视频托管平台时应该有策略。寻找一个既稳定又受欢迎的托管服务(如本身排名就很高),并 利用他们在谷歌的排名份额。 首先,在外部网站上托管你的视频将为你提供外向链接,或 反向链接,并有可能使你自己的域名更容易获得视频的丰富片段。 因此,这将使你有机会影响你网站的排名。

https://moz.com/blog/hosting-and-embedding-for-video-seo

资源。莫兹

分析和数据收集

你的视频是为了吸引和取悦客户,所以你自然想知道客户的满意程度。因此,你托管视频的服务应该给你提供大量的分析数据供你参考。而不仅仅是简单的东西,如意见、评论,而是一种完全不同的复杂数据。 嵌入视频允许你添加一个特殊的跟踪代码 --来自谷歌标签管理器--并在你的谷歌分析账户内获得额外的分析,如平均观看时间,人们一般停止观看的时刻,等等。你需要所有这些数据来了解你的视频如何以及为什么成功(或不成功)。

费用

一旦你确定你已经考虑了所有你需要的功能,你对平台和支持感到满意,并且你已经了解了视频质量,最后的事情是确保平台在你的预算之内。这取决于你预计有多少视频浏览量,以及你的视频文件有多大。更大的视频浏览量将意味着你要使用更多的带宽,因此价格会增加。还值得检查的是,该平台是否允许签订月度或年度合同。如果你是一个小企业或刚开始做视频,你可能不希望被长期合同束缚。

第四部分:如何生成嵌入代码

一旦你选择了你的视频托管平台,并上传了你所有的视频内容,只有一个步骤可以让你在你的网站上添加/嵌入一个视频--找到那个嵌入代码。

视频托管服务嵌入视频

从Wave.video嵌入

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

打开 "嵌入视频 "的开关,Wave.video将为您的视频自动生成一个嵌入代码。在这个开关下,你还会发现视频大小的设置,所以不要忘记利用这个功能。

Video embed

要自定义视频播放器,请打开 "外观 "选项卡,并随时改变播放器的颜色,定义显示哪些控件(如果有的话),或选择一个自定义缩略图。如果你想了解更多关于Wave.视频托管功能,请务必阅读这篇文章。

有几个选项,你可以用Wave.video在你的网站或博客上嵌入视频。

  • 内联嵌入

这是一个常规的嵌入,将把你的视频放在你的页面的周围文本或其他UI元素中。

以这种方式嵌入的视频将在一个模式对话框中打开,在其他内容上弹出。

有三种方式可以将你的视频整合到你的页面内容中:缩略图、高亮和文本链接。

Popover embed

缩略图

缩略图嵌入看起来与普通的内联嵌入相似。不同的是--视频将在一个弹出式窗口中播放,该窗口将出现在其他内容的上方。

Popover embed - thumbnail

亮点

这种类型的嵌入提醒了流行的Instagram Stories Highlights。这是一个很好的方法,可以很好地将视频整合到你的内容中,让你的网站访问者知道新到的产品,最新的新闻,特殊的交易,或一些来自幕后的视频。

Popover embed - highlights

文本链接

如果你不想用任何视觉效果来打破文本,但仍想为读者提供一个观看视频的简单方法,就用这种方式来嵌入视频。

添加一个文本短语并链接你的视频。点击该链接,视频就会出现在页面的上方。

Popover embed text link

从YouTube嵌入

你可以直接复制嵌入代码,或在一些可定制的选项上下功夫--显示/覆盖播放器控制或从某一点(不一定是开头)播放视频。

Embedding video from YouTube

如果你想进一步定制,有很多参数--自动播放、颜色、语言、循环,以及更多--你可以在iframe嵌入中添加。它们都列在 谷歌的开发者页面

如何嵌入YouTube视频

在这个快速视频中,我将向你展示如何在HTML中嵌入YouTube视频,如何使其在任何尺寸的设备上都能响应,我还将揭示你如何轻松调整嵌入选项,如自动播放。

从Vimeo嵌入

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

通过点击 "+显示选项",你可以自定义你的视频将用这个嵌入代码显示的方式。你可以改变播放器的颜色、大小(保持响应式,以防万一),添加一个介绍,并添加一些 "特殊的东西",如循环、自动播放和更多。

embedding video from Vimeo

通过选择专业版、商业版或高级版,你可以看到一些额外的好处,如定制颜色和组件,添加终端屏幕和标志。

从Wistia嵌入

进入你的媒体页面,点击嵌入和分享按钮。你会看到一个嵌入和分享屏幕,在那里你可以复制你的嵌入代码类型,并为你的页面改变它。

embedding video from Wistia

Wistia提供两种类型的嵌入代码。内联式嵌入和弹出式嵌入。内联嵌入代码意味着将视频与你的其他内容定位在一起,而弹出式嵌入帮助你的视频,嗯,弹出在你的页面内容上。

从Vidyard嵌入

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

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

embedding video from vidyard

如果你的网站不支持JavaScript,你可以选择麻烦嵌入? 复选框并复制iframe嵌入代码来代替。

社交媒体 嵌入视频

从Facebook嵌入

Facebook上的每个视频都支持嵌入功能。你所要做的就是点击Facebook帖子右上角的"...",然后按 "嵌入"。

embedding video from facebook

如果你愿意,你可以选择 "包括完整的帖子 "选项(只需按下复选框),它将把Facebook帖子中的相应文字与视频一起加入。

从Instagram嵌入

由于Instagram是由Facebook拥有的,嵌入过程非常相似。从桌面上打开Instagram(不是应用程序),点击右上角的"..."。

Embedding video from Instagram

按 "嵌入 "并复制嵌入代码。再次,你可以选择添加(或不添加)标题到你的嵌入中。

从Twitter嵌入

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

embedding video from twitter

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

从TikTok嵌入

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

embedding video from TikTok

使用另一种方法。视频嵌入代码生成

如果由于某种原因,你不希望按照简单的步骤从视频托管网站或社交媒体获得你的视频的嵌入代码,当然有一个变通办法。

有一种替代方法--你可以找到很多专门的网站,它们本身就是视频嵌入代码生成器。像 Embed.ly、 ToolkiSiege Media 这样的平台 允许你为你的视频生成一个嵌入代码:你所要做的就是手头有视频的URL,这些网站会自动为你的视频创建一个嵌入代码。

但是,这种变通方法也有一些缺陷。

  • 通常,你的网站上新嵌入的视频会有平台的水印在上面
  • 有一个非常有限的视频定制能力
  • 这些平台不提供任何分析,甚至不提供添加跟踪代码的可能性,以便在谷歌分析或第三方分析平台上进一步跟踪你的视频统计。

Embed video on website via embed code generator

因此,如果你有机会使用视频托管平台,一定要选择这个选项。

第五部分:如何在你的网站上嵌入视频

现在,当你完全掌握了关于视频嵌入的优势的知识,知道如何挑选合适的视频托管服务以及如何生成嵌入代码时,我们将迅速引导你了解如何将视频实际嵌入到最流行的网站托管平台的细节。

在HTML中嵌入视频

第1步:编辑你的HTML

在编辑模式中打开你想嵌入视频的页面。在代码中选择你想让你的视频出现的准确位置,并将你的光标放在那里。

第2步:复制和粘贴嵌入代码

复制你的嵌入代码,并简单地将其粘贴到你放置光标的地方。按 "保存 "或 "发布",就可以了。

仔细检查视频是否准确地显示在你放置代码的地方,不要忘记监测你的页面和视频的性能。

WordPress中嵌入视频

如果你的网站运行在WordPress上,有两个选项可以嵌入视频。

#1号选项:复制/粘贴网址

对于最流行的视频托管平台,如Vimeo、YouTube和其他一些平台,你不需要查找完整的嵌入代码。只需复制视频的URL并将其粘贴到视觉编辑器中 - 嵌入代码将自动生成。

#2号选项:使用嵌入代码

有时你想给视频显示添加一些调整,或者你可能在一个平台上托管你的视频,而这个平台不被WordPress的自动嵌入所支持。这时你就必须使用视频的嵌入代码。

进入WordPress文本编辑器(不要与视觉编辑器混淆),你会看到你的页面的HTML版本。然后,只要按照我们在本指南的HTML部分提到的步骤,在你的网站上嵌入视频。

Embedding a video in WordPress

在Shopify中嵌入视频

第1步:复制嵌入代码

第一步非常简单--只要从你托管视频的地方复制嵌入代码。

第2步:登录你的shopify管理仪表板

登录到您的Shopify管理仪表板。您目前所有的页面都应该列在 "在线商店->页面 "下。导航到你想编辑的页面,注意编辑器工具栏上的符号。

第3步:点击 "插入视频 "按钮

选择富文本编辑器,并在工具栏上点击视频摄像头图标。一个新的窗口将弹出--只要粘贴视频的嵌入代码并选择 "插入视频 "选项。你就可以了!

在Squarespace中嵌入视频

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

由于Squarespace是一个网站建设者,只要添加任何支持视频的区块,并简单地复制/粘贴你的视频URL,或按下嵌入图标(以红色圆圈突出显示),然后你会看到一个弹出窗口,你可以复制/粘贴你的嵌入代码。

Embedding videos in squarespace

在Squarespace中,你可以调整视频的标题和描述,通过取消 "使用缩略图 "选项,你还可以在该页面为你的视频添加一个定制的缩略图。

在Wix中嵌入视频

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

#1号选项: 复制/粘贴网址

第1步:打开编辑器

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

第2步:复制你的视频的URL

点击 "改变视频",复制你想展示的视频的URL。在这一步,你可以对播放和控制选项进行调整。

第3步:调整你的视频的位置

使用拖放的方式来改变你的视频的位置和大小。并直接保存页面!

#2号选项:使用嵌入代码

如果你没有在Wix支持的平台上托管你的视频,你将需要复制你的视频的嵌入代码。然后,你不选择添加视频,而是按 "更多"。这就是你找到HTML iframe的地方,你可以在那里粘贴嵌入代码。按 "保存",你就可以开始了。

最后的话

似乎我们已经涵盖了与在你的网站上嵌入视频有关的几乎所有内容。经过如此广泛的阅读,我们不得不说的是,在你的网站上添加视频将带来的价值不仅仅是你的SEO,分析,和收入部门。人们喜欢视频,并欣赏你为创造有价值的、娱乐性的、易于消化的内容所投入的时间。你所要 确保是, 你的视频不会影响用户体验,而视频嵌入是一个很好的工具。

请在评论中告诉我们,你是否希望我们在本指南中添加任何内容。哪些问题还没有得到解答?你希望我们在本指南中更新哪些视频托管平台或网站托管服务? 当涉及到将视频嵌入到你的网站并提供最大的用户体验时有什么 纠结和挑战?

在你的网站上嵌入视频的终极指南

我们会让你了解情况!

加入5000名首先阅读我们文章的营销人员行列