如何从 YouTube 或 Vimeo 向文字新闻添加视频弹出窗口

如果您想在 WordPress 网站上查看视频,请使用视频弹出窗口进行样式处理! 弹出窗口(也称为叠加或模式)会吸引对视频内容的注意。 视频不是在页面上播放,而是被带到最前沿,成为关注的中心。

我是否只想要嵌入 YouTube 视频?

将 YouTube 和 Vimeo 视频嵌入到 WordPress 页面非常简单。 得益于 WordPress 的“自动嵌入”功能,您只需将视频 URL 粘贴到 WordPress 编辑器中即可。 发布主页或帖子后,视频将显示在主页上。

但是,这种方法有一些缺点。 如果访问者想要使视频变大,他们唯一的选择就是点击“在 YouTube 上观看”链接。 这对YouTube有好处,但对你来说却不是那么好。 它会剥夺您的网站的访问者。

更糟糕的是,嵌入视频会创建与视频站点的连接并加载预览。 这会增加加载页面所需的时间。 我们应该 尽你所能 减少 页面加载时间不要加载可能不可用的内容。

视频弹出窗口解决了这个问题。 使用 WP 视频弹出窗口 插件将视频打开到页面其余内容的顶部。 不容错过。 此外,在访问者打开弹出窗口之前,不会创建与视频网站的连接,也不会加载不需要的页面元素。

插件允许您在访问者单击“触发器”时弹出视频。 触发器是可以添加链接、按钮和图像 CSS 类的任何元素。

插件的专业版还提供在访问者加载页面时播放视频的选项。 自动播放不一定是一个很好的用户体验(并且 谷歌不喜欢它因此,我们将重点关注创建访问者选择打开的弹出窗口。

了解如何安装插件并弹出 YouTube 和 Vimeo 视频。

安装 WP 视频弹出插件

登录到 WordPress 管理面板。

在左侧列导航中,单击[プラグイン]将鼠标悬停在链接上,然后单击[新規追加]单击链接。

在“搜索插件…”框中键入 WP 视频弹出窗口。

查找 WordPress WP 视频弹出插件

找到插件后,单击“立即安装”按钮。

点击安装WordPress WP视频弹出插件

单击“激活”按钮。

点击启用WordPress WP视频弹出插件

使用 WP 视频弹出窗口

没有使用插件所需的设置或设置。 只需向页面或帖子添加短代码即可。

这是一个短代码:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][wp-video-popup video=”link to YouTube or Vimeo video“][/ht_message]

这是您在 YouTube 视频网址中的外观:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][wp-video-popup video=”https://www.youtube.com/watch?v=6laq9l3qXYs”][/ht_message]

现在,让我们向页面添加包含视频 URL 的短代码。 打开示例页进行编辑,并将短代码粘贴到短代码块中。

如果不想使用 WordPress 古腾堡编辑器,请使用经典编辑器将短代码粘贴到页面上。

向页面添加短代码

第二步是 触发 它会弹出一个视频。 触发器是添加到链接、按钮、图像等的 CSS 类(wp 视频弹出窗口)。

使用 CSS 类触发操作可能看起来并不常见,但并不像您想象的那么复杂。

使用按钮触发弹出窗口。

以下“视频触发器选项”部分介绍了触发弹出窗口的其他方法。 以及如何使用经典的 WordPress 编辑器添加触发器。

添加按钮块并输入按钮文本。

输入按钮的文本

现在 按钮块打开时,然后单击右侧列中的[詳細設定]向下滚动到该部分。

将触发器类粘贴到“其他 CSS 类”字段中,然后单击 WP 视频弹出窗口.

粘贴触发器类

保存页面后,将显示一个按钮。

页面上的按钮

单击它,视频弹出窗口将变为操作。

视频弹出窗口

弹出 Vimeo 视频的过程是相同的。 使用上面使用 YouTube 网址的 Vimeo 网址。

视频弹出窗口短代码选项

您可以使用短代码选项执行一些操作。

您可能不希望在视频开始时将其静音,但在某些情况下,您可能需要将其静音。 某些浏览器仅在视频静音时自动播放视频,因此您需要决定是声音还是自动播放。

如果所选浏览器未自动播放视频,请尝试向短代码添加静音选项。

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][wp-video-popup mute=”1″ video=”https://www.youtube.com/watch?v=6laq9l3qXYs”][/ht_message]

频道视频[関連動画]仅显示

在大多数 YouTube 视频的末尾,您将看到相关视频。 您不能禁用此功能,但只能查看频道中的视频。

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][wp-video-popup hide-related=”1″ video=”https://www.youtube.com/watch?v=6laq9l3qXYs”][/ht_message]

跳过视频的开头

您可能希望在视频的特定点开始视频。 为此,请添加启动选项。 该值以秒为单位,因此,要在一分钟后开始视频,请键入 60。

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][wp-video-popup start=”24″ video=”https://www.youtube.com/watch?v=6laq9l3qXYs”][/ht_message]

使用多个选项

您可以将弹出选项合并到单个短代码中。

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][wp-video-popup mute=”1″ start=”24″ video=”https://www.youtube.com/watch?v=6laq9l3qXYs”][/ht_message]

视频触发器选项

在上面的示例按钮上放置了视频弹出窗口触发器。 但是,它们也可以放置在其他元素中。

按文本触发

您可以选择文本的任何部分以链接到视频弹出窗口。

在编辑器中选择文本。

然后向下滚动到“高级”部分,就像按钮一样。

将触发器类粘贴到“其他 CSS 类”字段中,然后单击 WP 视频弹出窗口.

粘贴触发器类

然后保存页面。

单击文本以启动视频

请注意,此方法不创建链接。 因此,没有可视显示文本是链接。 您可以在文本中用 HTML 或 CSS 下划线,以保持与网站上其他链接的一致性。

图像触发

将图片添加到页面。

然后向下滚动到“高级”部分,如上例所示。

粘贴触发器类,然后单击 WP 视频弹出窗口以转到“其他 CSS 类”字段。

粘贴图像的触发器类

保存页面。

现在,您可以在页面上看到可单击的图像,并打开视频弹出窗口。

单击图片以播放视频

同样,没有视觉迹象表明访问者需要单击图像。 您需要向图像本身添加文本、图像标题或某种“单击此处”文本。

正如您绝对注意到的,可以添加 CSS 类的元素可以是触发器。

在经典文字新闻编辑器中设置触发器

概念是相同的。 将 CSS 类添加到元素。 然而,这是在经典的WordPress编辑器的不同位置完成的。

将触发器 CSS 类添加到经典编辑器文本

要向文本添加 CSS,您需要从可视化编辑器切换到文本编辑器

切换到文本编辑器

然后,使用 span 标记换行触发视频的文本。 所以:

让我们链接到视频弹出窗口。

它看起来像这样:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]让我们链接到<跨度>视频弹出窗口。 </span>[/ht_message]

接下来,添加触发器类。

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]<跨度 类 = “WP 视频弹出窗口”让我们链接到>视频弹出窗口。 </span>[/ht_message]

将 CSS 类添加到文本

发布页面时,文本将触发视频弹出窗口。

页面上的触发器文本

将触发器类添加到经典编辑器按钮

您可以将类添加到按钮,如下所示:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]<按钮类型 =“按钮” 类 = “WP 视频弹出窗口”让我们链接到>视频弹出窗口。 </按钮>[/ht_message]

将 CSS 类添加到按钮

页面上的触发器按钮

将触发器类添加到经典编辑器图像

您无需切换到文本编辑器即可执行此操作。

将图片插入到页面中,然后单击编辑器中的图像。

单击“编辑”图标。

["編集" アイコン

[画像の詳細]在弹出窗口中,单击[詳細設定]找到该部分,然后单击[画像CSSクラス]在字段中输入弹出类。

在 中输入弹出窗口类 "图像 CSS 类" 田地

保存页面后,您将看到可单击的图像。

页面上的可单击图像

不要忘记添加文本或其他显示,以指示图像是可单击的。

卸载 WP 视频弹出插件时会发生什么情况?

卸载插件后,使用插件的页面和帖子 成为 影响。 问题包括:

  • 您的弹出 YouTube 播放器将停止工作。
  • 由于插件的短代码不再工作,因此短代码本身将显示在使用的位置。

视频规则,炫耀它

在弹出窗口中观看视频可加快页面加载速度,并说明访问者如何继续留在您的网站上。 WP 视频弹出插件可让您以正确的方式将视频添加到您的网站。 希望本教程将激励您向 WordPress 网站添加视频。

或添加更多!

您是否使用过本机 WordPress 的“自动嵌入”功能? 从嵌入迁移到弹出窗口时,是否注意到性能改进? 请在评论中告诉我们。

给TA打赏
共{{data.count}}人
人已打赏
WordPress 教程

如何创建动态网站并吸引受众

2022-9-11 2:09:40

WordPress 教程

如何通过设置投递网站赚钱

2022-9-11 4:11:44

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索