在 WordPress 中使用视频的终极超级指南

在您的网站上展示视频是一种向访问者展示(而不仅仅是告诉)您网站的全部内容的有效方式.

视频.他们无处不在.无论是在网站、应用程序、社交媒体还是 YouTube 上.他们抓住了我们的注意力,让我们观看,然后我们就上瘾了.所以是的-在您的 WordPress 网站上展示视频确实可以在很多方面发挥作用.

一个很好的例子是视频在照片旁边的分享和参与度最高.事实上,54% 的消费者希望看到更多视频内容.

除此之外,每 10 人中有 8 人购买了观看视频后使用软件或应用程序,并且 88% 的视频营销专业人士表示他们对社交媒体上的视频营销工作的投资回报率感到满意.

但是,如果您对视频有一个绝妙的想法,或者您已经有了一个,您将如何将其添加到您的网站?在这本权威指南中,我们将介绍您需要了解的有关视频的所有信息,从宽高比和编解码器的技术细节,到自托管与托管视频、为多个设备编码视频,以及开始将视频上传到您的 WordPress 网站.

让我们开始吧.

  1. 常用视频术语定义
  2. 上传和添加视频文件类型到 WordPress
  3. 您应该使用哪些设置?
  4. 自托管与托管视频
  5. 上传视频到 WordPress
  6. 将视频上传到媒体库
  7. 我们的内部视频专家 Joshua Dailey 的建议
  8. 为多个设备编码视频
  9. 在 WordPress 中显示响应视频
  10. 总结

定义的常用视频术语

在我们深入探讨视频如何与 WordPress 配合使用之前,先了解一下视频的常见定义可能会有所帮助.特别是,了解在您的网站上上传和显示视频时使用的术语有助于消除混淆.

如果您认为自己已经彻底了解视频术语,下面的定义可能会有所帮助.

For professional videos on your site, the 16:9 aspect ratio is usually best.
对于您网站上的专业视频,16:9 的纵横比通常是最好的.

Aspect Ratio-这个术语最常用于照片, 电视和视频.

它是指图像或屏幕的比例大小,宽度,长度,比例形式.

例如,常见的纵横比是 16:9,其中 16 个单位是视频或图像的宽度,9 个单位是长度.

分辨率-这是视频图像质量的另一个词,可以用每英寸像素 (PPI) 或更常见的每英寸点数 (DPI) 来衡量.这些单位用于解释图像或视频中每平方英寸显示多少颜色点(用于打印图像)或多少颜色像素(用于数字内容).更高的 DPI 或 PPI 意味着更高的分辨率和更好的质量.高质量 (HQ) 视频的标准是 300 PPI.

在显示视频时,分辨率通常以 width x height 的形式表示,其中 width 是指显示的水平像素数,height 是屏幕上显示的垂直像素数.

以简短形式编写时,它看起来像 height p,,或者使用一个常见的例子,1080p.

标清 (SD)-常见的视频分辨率为 640×480 或 480p,被视为标清.标清视频的大小与较旧的、大部分为方形的电视相当.

高清 (HD)-今天制造的大多数电视和电脑显示器都是 1920×1080 或也称为 1080p.画面清晰明快,因为显示器和屏幕专为高分辨率视频而设计.

还有其他分辨率被视为高清,例如 1920×720.这还包括 2.39:1 和 1.85:1 的宽高比,它们被认为是超宽屏,通常用于您可以在自己喜欢的电影院观看的电影.

隔行扫描-视频信号在屏幕上显示视频的旧方式.信号将视频的水平线发送到屏幕,它们一起形成运动图像.隔行扫描视频每隔一条水平线显示一次,并在奇数行和偶数行之间切换.

如果你还有一台 90 年代买的大盒子电视,上面的视频会隔行显示.这是视频的旧标准.

Remember the big, old TVs?
还记得大而老的电视吗?

渐进式扫描-这是视频的新标准.视频信号显示 每条 水平线,以获得更丰富和更高质量的画面,不像隔行交替显示.

如果您在首次制造时就购买了纯平电视或显示器,那么您将拥有一个显示逐行扫描视频的屏幕.

帧速率-这是传感器在一秒钟内捕获视频的速度.单帧看起来像一张照片.当你将每一帧串在一起时,你会得到一张运动图片,或者换句话说,一个视频.

每秒帧数 (FPS)-该术语用于描述视频每秒使用的帧数.常见的 FPS 包括 24、25、29.97、30 和 50.当您拥有 30 FPS 或更高的视频时,它被视为高清.

比特率-这表示上传视频时每秒传输的数据量,通常以每秒兆比特 (mbps) 或每秒千比特 (kbps) 为单位.

如果您发现一个视频主机上传比特率低于 1000 kbps 的视频,最好搜索其他主机,因为上传过程对于大多数人来说太慢了.

压缩-虽然这个术语不仅仅适用于视频,但在这种情况下,它意味着减少视频文件所包含的数据量.

压缩视频是个好主意,因为它们会更快地上传到您的网站或视频托管.如果您选择让用户下载您的视频,这也会快很多.

每个视频托管服务可能有不同的压缩指南和建议,因此如果您选择在 WordPress 网站之外托管您的视频,可能值得研究一下.

有损 – 压缩视频文件时,有损压缩意味着与原始文件相比,视频会减少.尽管质量较差,但有损压缩通常会导致文件更小.

无损-这与压缩视频文件时的有损相反.虽然无损压缩意味着原始文件和压缩文件具有相同的视频质量,但与有损压缩文件相比,这通常会导致文件更大.

Lossy compression is lower in quality and smaller in file size than lossless compression.
与无损压缩相比,有损压缩的质量较低且文件大小较小.

编解码器-这是最常见的一种压缩和解压缩视频的方法.它也被称为容器.

如果可以压缩和解压缩视频,则压缩视频的软件通常也称为编解码器.如果它只能压缩视频,通常称为编码器,而只能解压缩的软件通常称为解码器.

常见的编解码器包括 H.264/MPEG-4、VP6 和 WMV.

编码-这描述了获取原始(源)视频文件并将其从一个扩展名转换为另一个以在不同设备和浏览器上查看的过程.

例如,将名为 myvideo.mov 的视频文件转换为 myvideo.mp4 可以让视频在 WordPress 网站上上传和播放.

由于不同的浏览器和移动设备接受不同类型的视频文件格式,因此对视频进行编码有助于确保所有访问者都可以观看您的视频,无论他们选择如何观看您的视频.

Video

上传和添加视频文件类型到 WordPress

说到编码,WordPress 允许您默认上传某些视频文件扩展名.

  • .MP4、.M4V (MPEG-4)
  • .MOV (QuickTime)
  • .WMV(Windows 媒体视频)
  • .AVI
  • .MPG
  • .OGV (Ogg)
  • .3GP (3GPP)
  • .3G2 (3GPP2)

出于安全原因,默认情况下不接受许多文件类型.如果您不需要 WordPress 不接受的文件类型,最好不要使用它.

Error message in WordPress: File type not permitted.
如果您尝试上传尚未编程到 WordPress 中的文件类型,您会得到一个错误.

如果您仍然想让您和您的用户上传更多默认情况下不允许的文件类型,您可以通过在主题的 functions.php 底部添加一些代码来实现wp-content > 下的文件主题>你的主题.

请记住,在安装主题更新后,您对主题的 functions.php 文件所做的任何更改都会被删除.

为防止这种情况发生,您可以创建一个子主题.如果您需要有关如何执行此操作的指示,请查看我们的帖子如何创建 WordPress 子主题.

这是您需要添加以包含其他文件类型的代码:

加载要点 8787fee4a65bcb3009caf30c61ac18a1

要添加您选择的文件扩展名,请将第 4 行的单词 extension 更改为您要添加的实际文件扩展名,然后将 mime/type 替换为您可以在 来自 FreeFormatter.com 的 MIME 类型列表.

要添加第二个文件扩展名,请将 docapplication/msword 更改为您想要的扩展名并在第六行输入.如果您只想添加一种文件类型,也可以删除此行.

如果您想从接受的文件类型列表中删除文件类型,同时添加其他文件类型,请添加以下代码:

加载要点 0cf3da67abf68b​​1e93cba23d1dfb5cb4

您可以将它添加到相同的位置,添加到 wp-content > 下的 functions.php 文件的底部.主题>你的主题.

请务必编辑第 8 行以反映您要删除的扩展名.在本例中,您可以将 exe 更改为您想要消除的文件类型.

"Upload

对于多站点安装,将上述代码添加到主题后,您需要通过超级管理员仪表板添加文件扩展名 >设置 >网络设置.在上传文件类型下,输入您要添加的文件的扩展名,确保每个文件类型用一个空格分隔.

将扩展程序添加到列表后,点击页面底部的保存更改.

您和您的用户现在可以上传您添加的文件类型.

如果您希望避免向主题添加代码,您仍然可以使用 WP 添加 Mime 类型 插件或 媒体库助手插件.

您应该使用哪些设置?

在开始上传视频之前,您可能想知道应该选择什么样的设置来确保它们显示良好.归根结底,这个可能对每个人看起来都不一样,尤其是如果您决定上传到视频托管服务,因为每个服务通常都有自己的推荐设置.

另一方面,如果您是自行托管视频,则一般的经验法则可以帮助您确定特定项目的设置应该是什么样的.

这些来自 Video4Change 的推荐应该可以帮助您一个好的开始:

格式: MP4

视频

  • 编解码器:H264(高配置)
  • 帧速率:24、25 或 30(恒定)
  • 帧大小/分辨率:1280 x 720 (720p)
  • 字段:渐进式
  • 比特率:5000 – 10000 kbps

音频

  • 编解码器:AAC-LC
  • 比特率:320 kbit/s
  • 采样率:44.100 或 48,000 kHz(保持原始采样率)

请记住,较高的比特率会导致文件更大,因此如果您的目标是保持整洁紧凑,请选择接近每秒 5000 千比特的比特率.

现在您几乎可以上传视频了.

Video

自托管与托管视频

在深入了解向您的网站添加视频的细节之前,首先要了解您的视频应该存储在哪里,这一点很重要.为此,有两种选择:自托管和托管.

自托管您的视频意味着它们与您的 WordPress 网站一起存储在您的服务器上.

托管选项意味着您的视频存储在其他地方并链接或嵌入到您的网站.

选择其中一个的原因有很多,这里有一些提示可以帮助您确定哪个选项最适合您:

  • 您是否打算展示许多高质量或高清视频? 如果是这样,您的服务器的存储限制可能会很快用完,可能适合在其他地方托管您的视频.
  • 您设置的主机类型很重要:
    • 共享主机– 如果您甚至能够加载一个大文件大小的高质量视频,那么就认为自己很幸运.绝对考虑在其他地方托管您的视频.
    • VPS 托管-你可能有足够的空间来存储相当多的视频,只要你不打算随着时间的推移不断添加更多视频.
    • 专用主机-你应该很高兴并且有足够的空间容纳许多视频,但是,取决于你的设置,如果你想随着时间的推移添加许多视频,你以后可能需要升级.
  • 要很好地托管视频,您应该确保您的网站和服务器 针对速度进行了优化-确保您的服务器有足够的 RAM 和相当大的容量处理器速度.您需要的数量取决于您计划自托管的视频数量.作为一般经验法则,大小为 1GB 的视频应该很适合具有 2GB 半 RAM、至少一个双核处理器和 1500MB 存储空间的托管计划.
  • 确保您有足够的带宽分配给您的主机包 – 您预计有多少访问者?如果您认为您的网站会因受欢迎程度而爆炸式增长,您应该考虑允许您的网站使用多少带宽.您期望的访问者越多,您需要的带宽就越多.为了让您了解您可能需要多少带宽,播放或下载 1000 次 1 GB 的视频需要 1 TB 的带宽(即 1000 GB).如果您打算展示许多高质量的视频以及对您网站的大量访问,则应考虑将您的网站托管在您自己的服务器之外的其他地方.

如果您的服务器没有足够的存储空间、速度和带宽,请务必考虑将视频托管在您的服务器之外.如果您的服务器上有足够的空间以及大量的速度和分配的带宽,但又想托管具有数千名访问者的大量视频,也可以考虑将您的视频托管在您的服务器以外的其他地方.

另一方面,如果您的服务器拥有大量存储空间、一些快速处理器和大量带宽,为您提供喘息的空间,那么您至少应该能够毫无问题地托管相当多的高分辨率视频.

如果您仍然不确定自己是否有足够的资源来托管自己的视频,但又想要,最好咨询托管服务提供商的客户服务团队.它们可以最好地帮助您找出满足您特定需求的最佳选择.

将视频上传到 WordPress

随着 Gutenberg 的推出,将视频和 音频 上传到 WordPress 从未如此简单.现在只需点击几下,您就可以开始了.

如果您决定自行托管您的视频,请按以下步骤将它们添加到您的 WordPress 网站.

将视频添加到您的帖子或页面

块编辑器中,已经有一个视频块,您可以简单地将视频上传到其中,然后放置在您的帖子或页面中的任何位置.

Where you find the audio block in Gutenberg.
在古腾堡哪里可以找到音频块.

在这里,您可以选择通过上传媒体库插入网址来获取您的视频.

由于您正在上传,您可以点击上传选项.

Example of Gutenberg video block.
Gutenberg 视频块示例.

您将选择一个文件,上传您的媒体,仅此而已.

如果您喜欢使用经典编辑器,请在帖子或页面中点击添加媒体按钮,然后点击顶部的上传媒体标签内联弹出窗口打开时尚未在该选项卡上.

Adding media in a post
将视频直接上传到帖子很容易.

然后,点击页面中间的选择文件按钮.

Selecting files to upload
您也可以通过选择媒体库 选项卡.

选择您要上传的视频文件,然后按照计算机的提示进行操作.

Attachment display settings
如果您不想嵌入视频,还有其他可用选项.

文件上传后,在右侧根据需要输入标题、说明和说明,并确保从嵌入或链接<中选择了嵌入媒体播放器选项/strong> 附件显示设置下的下拉框.应该默认选中.

最后,点击插入帖子按钮,您的视频将添加到您的帖子或页面中,并带有缩略图.

将视频播放列表添加到帖子或页面

如果您上传了两个或更多视频,您可以创建一个播放列表.

Create video playlist menu item
创建视频播放列表就像从媒体库的列表中选择视频一样简单.

为此,请再次点击添加媒体按钮,从弹出窗口左侧的菜单中选择创建视频播放列表,然后点击您要添加的视频的图标.

如果您输入有误,只需点击您要删除的视频图标右上角的复选标记即可.

您也可以点击窗口底部的清除链接取消选择所有选项.

完成选择后,点击每个视频,在右侧为每个视频添加所需的标题、说明和说明,然后点击创建新的视频播放列表按钮附件详情部分的底部.

此时,您可以编辑所选视频的标题,通过点击左侧的添加到视频播放列表菜单项添加更多视频,并通过点击反转所选视频的顺序右侧播放列表设置旁边的倒序按钮.

在设置下,有两个复选框:

  • 显示视频列表-此选项使用缩略图显示您的视频.
  • 显示图像-选中此设置的复选框会显示视频的文本列表.

完成选择后,点击右下角的插入视频播放列表按钮.

最后但同样重要的是,请务必点击帖子或页面上的发布更新按钮以保存更改.

将视频上传到媒体库

如果您想上传视频,但不想立即将其插入帖子中,您可以转到媒体 >在您的管理仪表板中添加新的,然后点击选择文件按钮.按照计算机提示选择并上传视频.

"Media

上传完成后,点击加载栏完成后出现在页面上的文件图标.在出现的附件详细信息内嵌弹出窗口中,点击底部的编辑更多详细信息链接.

编辑媒体页面加载后,您可以通过编辑标题、添加标题和说明轻松自定义视频设置.

在此页面上,您还应该看到播放器预览中显示的预览图像.如果您想更改显示的图片并设置自己的图片,请点击页面右侧底部的设置特色图片链接.

应该会出现媒体上传器弹出窗口,您可以在其中从媒体库中选择图像.

Set featured image link on the edit media page.

Set featured image link on the edit media page.
您可以在编辑媒体页面上更改许多设置,包括设置您的特色图片视频.

在此页面上,您还应该看到播放器预览中显示的预览图像.如果您想更改显示的图片并设置自己的图片,请点击页面右侧底部的设置特色图片链接.

应该会出现媒体上传器弹出窗口,您可以在其中从媒体库中选择图像.

您也可以通过点击上传文件 > 上传新文件.选择文件,然后按照计算机的提示进行操作.

添加您想要的标题、说明、替代文字和说明,然后点击右上角按钮上的设置特色图片按钮.

最后,点击更新按钮,您的新特色图片和其他更改应该会保存.您的视频现在可以随时添加到帖子或页面中.

请记住,为了让您的视频可以选择嵌入到您的帖子和页面中并且实际上可以使用默认的 WordPress 播放器播放,您的视频文件需要使用 MPEG-4 编解码器进行编码或者换句话说,具有.mp4 扩展名.

如果您想选择其他视频播放器,而不是 WordPress 自带的默认播放器,请查看我们的帖子 用于高级嵌入的免费 WordPress 视频插件.

来自我们内部视频专家 Joshua Dailey 的建议

我向我们的摄像师 Joshua Dailey 询问了他在使用视频时的建议,尤其是他会给使用视频的企业提供哪些建议.

Joshua 在 WPMU DEV 指导、编写和编写产品视频,并得到了我们团队其他才华横溢的摄像师的帮助.

Video guy Joshua Dailey.
视频人 Joshua Dailey.

"我们正在努力让用户更好地了解 WPMU DEV 产品和 WordPress,以便他们能够更快、更明智地决定哪些产品最适合他们的需求." ——约书亚戴利

Video experts at WPMU DEV.
"我们正在努力让用户更好地了解 WPMU DEV 产品和 WordPress,因此他们可以更快地做出明智的决定,决定哪些产品最适合他们的需求.通过我们的教程,我们试图帮助人们尽快入门." ——约书亚戴利

"通过我们的教程,我们试图帮助人们尽快上手." – 约书亚戴利

以下是 Joshua 的 10 大 UI 和 UX 最佳实践列表,排名不分先后:

1.找到合适的主机

在上传超过 100 个视频之前,找到一个可以满足您所有需求的视频非常重要.无论是自托管、免费托管还是高级托管,请确保您的主机不仅满足您当前的需求,而且能够并且愿意发展以满足您未来的需求.

将 WPMU DEV 从 Vimeo 迁移到 Wistia 需要大量工作.这是值得的,但如果我们先找到它们,它会节省很多时间和金钱.您可以在我们的文章为什么我们从 Vimeo Pro 迁移到 Wistia-以及为什么您应该这样做中了解有关转换过程的更多信息.

2.视频需要编码

确保您的视频编码正确.首先,为了获得最佳效果,其次,为了在所有类型的设备上播放.如果您是自行托管视频,那么您最初可能不会想到这一点.

如果您只使用过 YouTube、Vimeo 或 Wistia,它们会重新编码您的媒体,以便您的视频可以在所有类型的设备上播放-在所有类型的浏览器中.自托管时,您可能需要以不同格式存储同一视频的多个版本,或者您可能无法观看视频,具体取决于他们使用的浏览器或设备.

3.全世界的观众都应该有平等的机会

如果您的网站面向来自世界各地的用户,请记住,互联网速度可能会使您的某些用户几乎无法访问大量视频内容.这一直在改善,但我们远未在全球范围内享有平等的访问权限.

这并不意味着您不应该使用视频,因为它是一种强大的交流方式,但这确实意味着您应该在分享时了解您的观众是谁.确保您使用合适的播放器和压缩方法也很重要.

4.演示问题

您的用户很容易跳过仅根据缩略图点击视频.请记住,视频缩略图很重要.

5.测试您的视频的性能

尝试您的疯狂想法,但要知道它们何时有效,何时无效.我们花了很多时间制作视频,在内部分享它们并在推送它们之前调整内容.这是确保观众中的每个成员都能平等和完全访问您的视频的重要步骤.

Always test the performance of your videos.
始终测试视频的性能.

6.了解您的受众

视频发布后,我们会花时间观察用户如何与我们的内容互动,并在需要时进行更多调整.例如,我们制作了一些关于插件的长而深入的视频教程,但发现简短的设置指南更容易被更多观众访问.

由于通过分析跟踪观众的参与度,我们能够确定我们的观众喜欢什么,特别是因为它在所有企业中都不相同.

7.密切关注质量

音频做得好的往往会被忽视,音频做得不好会让观众相信整个视频都是垃圾.将视频用作销售工具时要小心,因为视频的质量反映了您的产品或服务的质量.

8.彻底规划您的视频营销

Customers and end users equate the quality of your marketing to the quality of your product even if it’s not an accurate reflection.Having a solid marketing strategy helps keep your end user happy with your business.

9.Videos Should be Accessible to Everyone

According to preliminary research from the 2012 National Health Interview Survey an estimated 20.6 million adult Americans have been reported as having trouble seeing, even with the aid of glasses and contacts or are legally blind.

Gallaudet University in Washington, DC has also reported that an anywhere from nine to 22 out of every 1000 Americans have a severe hearing impairment or are legally deaf.With these numbers in mind, it’s important to make sure your videos are accessible to individuals who can identify as having these impairments.

Uploading closed captioning documents to your videos helps those who are hearing impaired to view your videos with ease.Similarly, including a transcript of your videos assists those who are visually impaired to access your videos.

Making sure your video player includes keyboard navigation and support for screen readers are also important.All videos should play only when the play button is clicked or otherwise accessed with a keyboard to be considered accessible.

If your videos play automatically on page load, they aren’t accessible and you should adjust your settings.

Have you ever wondered how easy it is for people with disabilities to access your site and then navigate around it?
Have you ever wondered how easy it is for people with disabilities to access your site and then navigate around it?

Not to mention the plain idea that videos that play automatically can often be startling, especially when your users aren’t aware of where the sound is suddenly coming from or if the volume is set to be high.It’s also a drain on most end user’s internet bill since they need to pay for streaming videos.

It may not be a huge concern for desktop users at home or in the office, but mobile users often have a much smaller and limited data plan with their carrier and each played video ends up costing them.This is why you should consider leaving out your video backgrounds, if only for mobile themes, as well as eliminate videos which play automatically.

10.Responsive Design and Style

Part of keeping your videos accessible to all your users is making sure that they’re responsive on screens of different sizes from browsers to mobile devices.This can be easily achieved with a responsive player, a video host or some CSS.

With these tips in mind, let’s look at how you can embed videos that are encoded across multiple devices and how to make your videos responsive for self-hosted videos.

Encoding Your Videos for Multiple Devices

As Josh has mentioned, it’s easy to forget that self-hosted videos require you to encode them yourself since it’s not done automatically, such as with the many video hosting options out there.Browsers and mobile devices often have different requirements when it comes to the video compression methods that are able to be displayed.

Once you upload your videos to your WordPress site, you can use the video shortcode to display them on a post or page.You can also add parameters so certain video files play depending on the device your visitors use to view the page.

Here’s what the shortcode looks like with a single video attached:

Loading gist 4329c25880a88f310a2e9eacdeca922c

To use this shortcode, you would just need to change myvideo.mp4 to the source video in your media library.You can even type in a URL to an external source if you still want to use the WordPress video player without self-hosting your videos.

To add alternate video file options to play on different devices, this is the shortcode with the parameters included that you would use:

Loading gist a25394154b5e191f8999fca55cb76604

You don’t need to spend a lot of time to define the different devices you want to support.Just enter in your video file source just like the previous example, while also including the correct file type.

Once your visitor starts loading the page, WordPress detects what file type the visitor’s device supports and automatically loads that video file on the page based on that shortcode.Pretty cool, don’t you think?

For example, if you wanted to add a flash (.flv) video to the list, you would enter a space after the last parameter, then add flv="myvideo.flv" and save the page or post.Don’t forget to change myvideo.flv to your actual video file listed in your media library or URL to the external source.

The file types you can use with the video shortcode are:.MP4, .M4v, .WEBM, .OGV, .WMV, .FLV

There are also other options you could include other than the source file.

Adding any of the options below before or after src in the above examples adds different functionalities to the WordPress player.

  • poster – Adds a specific feature image to the video player.By default, this is set to none.
  • loop – Adds the functionality of automatically replaying the video on a loop.To do this, set it to "on" instead of its default setting which is "off."
  • autoplay – If set to "on," your video can autoplay when the page loads.By default, this setting is set to "off" which is also our recommendation to remain fully accessible to the hearing and visually impaired.
  • preload – Sets the data that’s loaded automatically.The default is "metadata" which loads only the video’s metadata, but you could choose "auto" to load everything or "none" to not load the video at all.
  • height – If you want to display a different height of the video other than the default size of the uploaded video.
  • width – You can also change the width in the same way if you want a different size than the original source video in your media library.

If you’re a developer and want to experiment with the code for this shortcode, you can find it in the media.php file under the wp-includes folder.

Once you have added your custom video shortcode and saved your changes, you’re all ready to go.That’s all you need to do to ensure your videos play across devices and browsers.Really, that’s it!

Displaying Responsive Videos in WordPress

With Google’s new algorithm, your search ranking can tank quickly if your site isn’t fully responsive.Google also doesn’t consider sites that need you to scroll horizontally to be responsive.

Videos can be a huge offender for this if you’re not careful so it’s important to test out your site to make sure it works well in both desktop browsers as well as mobile ones.

Luckily, if you use the default WordPress player, your videos should be fully responsive.If you use one of the top video hosting services to display your videos, you’re likely good to go as well.

This can sometimes be a problem if you are using an untested player or an iframe to display your videos.If you choose to use a different player, make sure to thoroughly test it out for responsiveness.

If you decide to display your videos with an iframe, it’s important to add some extra code to ensure its responsiveness.It’s important to remember that many video hosts such as YouTube and Vimeo give you the option to embed your videos with an iframe.

Upload a copy to your media library, then head over to your WordPress files.On each page file you use for your particular theme – or at least the type of page where you want to display videos.For example, you can add this script to your/wp-content/themes/your-theme/page.php file to be able to display responsive videos embedded with iframes on your WordPress pages.

Edit the file and call the script toward the top of the page, after all the initial page notes.

You can call the script like this:

Loading gist d659b26637581e4eb4607e9f1ffe34ec

Save your file and that’s all you need to do.This isn’t necessarily the best solution since your videos aren’t guaranteed to look great.

It can also be a problem if your visitor’s browser fails to load the script.This is why using a player or embed option you know is fully responsive is often the safest option.

Summary

As demonstrated, videos can be a powerful, easy to enhance your viewers experience to your WordPress site.

To learn interesting ways to integrate video into your site check out some of our other posts: Using Appointments + to Setup and Streamline Client Consultations, How to Add a Video Background to Your WordPress Site in 4 Easy Steps and Best WordPress Video Chat Plugins – Based on Your Needs.

Tags:

6

发表回复