Weebly网站添加YouTube和Vimeo视频灯箱弹出窗口

Weebly网站添加YouTube和Vimeo视频灯箱弹出窗口

Weebly建站提供了许多元素来在您的网站上嵌入视频。 YouTube 和嵌入代码元素可供免费用户使用。 托管高清视频播放器元素仅适用于专业和更高计划的用户。 但是所有这些选项都允许您在页面上嵌入视频,而无需在弹出式灯箱中显示它。 在本文中,我们将解释如何使用 jQuery 小部件在弹出式灯箱中嵌入 YouTube 和 Vimeo 视频。

以下是小部件的一些功能:

  • 您可以将小部件链接到文本或按钮或图像。
  • 每当用户单击链接时,视频将以灯箱弹出模式打开。
  • 可以链接 YouTube、Vimeo 或任何其他视频源。
  • 您可以自定义弹出窗口的宽度和高度,以适应您网站的布局。
  • 小部件有两个选项来关闭弹出窗口——通过单击关闭按钮或单击外部覆盖区域。
  • 视频弹出窗口是完全响应的,适用于所有设备。

推荐:WordPress搜索插件Relevanssi pro高级插件

如何在 Weebly 网站中添加小部件?

第 1 步 – 下载文件

视频灯箱小部件需要 jQuery 脚本、CSS 和 HTML。 单击下面的下载按钮下载 zip 存档文件“Video Lightbox.zip”。

解压缩存档并提取以下项目:

  • video-popup.js
  • video-popup.css
  • 关闭.png

第 2 步 – 在 Weebly 中上传文件

第二步是上传您的 Weebly 网站上的所有文件。 导航到“主题”选项卡,然后单击“编辑 HTML / CSS”按钮。 您将被带到 Weebly 代码编辑器并导航到“资产”部分。 上传所有三个文件并保存更改。

在 Weebly 中上传小部件文件
在 Weebly 中上传小部件文件

注意 如果您在资产部分上传了很多文件,则创建一个名为“videolightbox”的新文件夹并上传文件夹内的文件。

上传的文件将具有以下相关链接:

  • /files/theme/video-popup.js
  • /files/theme/video-popup.css
  • /文件/主题/close.png

您还可以使用绝对 URL,如下所示:

  • https://yoursite.com/files/theme/video-popup.js
  • https://yoursite.com/files/theme/video-popup.css
  • https://yoursite.com/files/theme/close.png

如果这不起作用,请右键单击上传的文件并复制完整的 Weebly URL。 它应该如下所示:

https://www.weebly.com/editor/uploads/4/8/5/3/4853992/custom_themes/881978474505006211/files/close.png

请记住在以下部分中使用正确的 URL。 如果您有疑问,请将完整的 URL 粘贴到浏览器中并检查您是否可以查看内容。

第 4 步 – Weebly 页面中的链接脚本

在您的 Weebly 网站上,打开您要插入视频灯箱小部件的页面并导航到“SEO 设置 > 页脚代码”部分。 粘贴以下代码以链接页脚上的脚本文件:

<script type="text/javascript" src="https://www.webnots.com/files/theme/video-popup.js"></script>
在 Weebly 页面中添加页脚代码
在 Weebly 页面中添加页脚代码

第 5 步 – 在 Weebly 页面中链接 CSS

在“SEO 设置 > 标头代码”部分添加以下代码以链接 CSS 文件。

<link rel="stylesheet" type="text/css" href="https://www.webnots.com/files/theme/video-popup.css"></link>

第 6 步 – 插入 HTML

插入脚本和 CSS 后返回页面的内容区域。 拖放嵌入代码元素并插入以下 HTML 代码。

<!-- YouTube Popup as Button with Autoplay -->
<div class="btn">
<a class="bla-1" href="https://www.youtube.com/watch?v=uWh8BYAnrR0">YouTube Video with Autoplay as Button Link</a>
</div>
<!-- YouTube Popup as Button without Autoplay -->
<div class="btn"><a class="bla-2" href="https://www.youtube.com/watch?v=uWh8BYAnrR0">YouTube Video without Autoplay as Text Link</a>
</div>
<!-- Vimeo Popup as Text Link with Autoplay -->
<p>
<a class="bla-1" href="https://vimeo.com/81527238">Vimeo Video with Autoplay as Text Link</a>
</p>
<!-- Vimeo Popup as Text Link without Autoplay -->
<p>
<a class="bla-2" href="https://vimeo.com/81527238">Vimeo Video without Autoplay as Text Link</a>
</p>
<!-- YouTube Video Linked with Image without Autoplay -->
<div>
<a class="bla-2" href="https://www.youtube.com/watch?v=uWh8BYAnrR0">
<img src="https://www.infoxiao.com/wp-content/uploads/2022/08/1659555535_340_YouTube,We.jpg" width="300" height="150"></a>
</div>

第 7 步 – 自定义小部件

  • 仅添加所需的 HTML 块以插入按钮或文本链接或图像。
  • 用您自己的替换图像 URL 和视频 URL。
  • 弹出窗口的最大宽度和高度分别定义为 680 像素和 480 像素,您可以在 CSS 中自定义。
  • 我们建议您使用没有自动播放选项的视频弹出窗口,以提供更好的用户体验。 还要确保清楚地描述单击链接将打开一个弹出窗口。
  • 阻止浏览器中的弹出窗口通常会阻止在新窗口中打开的弹出窗口。 即使用户在浏览器中阻止了弹出窗口,此视频弹出窗口也将起作用。
  • 此小部件引用自 jQuery YouTube 灯箱小部件,并进行了修改以适应 Weebly 网站。 您也可以在任何其他平台上使用它。
  • 您不能将其与 Weebly Pro 高清视频播放器元素一起使用,因为使用该元素时您不会获得上传的视频 URL。 只要您有视频的 URL,该小部件就会很有用。

下面是小部件的外观,单击链接以查看带有灯箱效果的弹出窗口。


带有自动播放作为文本链接的 Vimeo 视频

没有自动播放为文本链接的 Vimeo 视频

单击下面的图像以查看 YouTube 视频弹出窗口。

1659555535 340 YouTube,We

 

推荐:WooCommerce主题Oxygen WooCommerce主题


发表评论