Weebly网站添加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 代码编辑器并导航到“资产”部分。 上传所有三个文件并保存更改。

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

第 3 步 – 上传文件的链接

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

• /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>

推荐：10 个适合教师的最佳PowerPoint插件

第 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 视频弹出窗口。