Elementor视频元素及背景视频如何添加设置使用

Elementor视频元素可以轻松的把视频放到页面任何位置中，视频来源自外部源头或者上传到服务器中。因为来源的不同你可能会看到略有不同的自定义选项。在外贸网站中视频的作用很大，可以让访客快速了解工厂、产品，加深印象。

1、Elementor视频元素必备条件

需要部署 Elementor插件，免费版即可。

2、Elementor视频元素添加设置使用

新建文章/页面，从 Elementor左侧工具栏拖动 video元素到右侧。

视频

• 来源：选择视频来源。在 Youtube、Vimeo、Dailymotion 或自托管（包括在外部服务器上托管）之间选择
• URL : 输入视频 URL
• 开始/结束时间：设置视频的开始和结束时间。全长视频留空

以 YouTube为例说明

• 自动播放：开启后打开页面时自动播放视频
• 在移动设备上播放：只在自动播放设置为是时出现。有助于移动端自动播放视频。
• 静音：静音视频
• 循环：循环播放视频
• Player Controls：显示播放器控件，比如播放/暂停、音量。
• Modest Branding：当 Player Controls 设置为YES时，可以开启 Modest Branding 来隐藏 YouTube 图标
• 下载按钮：开启Player Controls时，提供视频下载按钮
• 推荐 视频：从“当前视频频道”或“任何视频”中选择
• 隐私 模式：开启时Youtube 不在网站上存储访问者的信息，除非他们播放视频

自托管

视频放在服务器或外部主机中

• 自动播放：打开页面时自动播放视频（自动播放受Google对 Chrome 浏览器自动播放规则影响。）
• 静音：启动视频静音
• 循环：启动视频循环播放
• 播放器 控件：显示播放器控件，比如播放/暂停、音量等。
• 下载按钮：显示下载按钮（仅适用于 Chrome）

Image overlay 图像叠加

开启图像叠加后会默认显示图片，点击后才会显示并播放视频。
设置图片大小
在图片上显示播放图标

风格

• 纵横比：更改视频纵横比，包括：1:1、3:2、4:3、16:9、21:9 和 9:16
• CSS 过滤器：设置模糊、亮度、对比度、饱和度和色调

灯箱

开启灯箱效果后，视频会弹窗播放。

大家把下面的选项挨个设置一下就能看到页面效果了。

• 在 Style 风格中会看到灯箱的相关设置项。
• 灯箱就是一种在页面上弹窗播放的效果。可设置背景颜色、用户界面颜色、UI悬停颜色等。
• 内容宽度、内容位置、入口动画。

3、Elementor 添加和编辑背景视频

把视频设置为 section的背景，并在上面添加标题、内容、按钮等诸多元素。

点击 section的编辑按钮（6个点），从左侧工具栏开始设置。

左侧工具栏的 Style（风格）

• 背景类型：选择视频小图标，
• 视频链接：与上面一样选择合适的视频来源URL，老魏这里以上传到主机上的一段视频为例讲解。
• 选择视频的开始时间、结束时间
• 播放一次：启用后只播放一次。此时为了避免视频播放完毕的空白，建议添加一个“背景回退”图片。如果不启用这个选项，会循环播放，也就不存在空白了。
• 在手机上播放：启用后在移动端播放。
• 背景回退：上传封面图片，替换移动设备和平板设备上的背景视频，有时移动设备上会禁止播放视频，避免浏览器限制和带宽耗尽。
• 形状分隔线：给视频添加形变效果。

布局

• 高度：选择最小高度
• 最小高度：根据视频大小设置合适数值

在视频上依次添加 标题元素、文本编辑器元素、inner section 等。

在 inner section中添加两个按钮。

如下图所示是编辑区域的样子。

此时查看前台页面如下图所示，视频作为页面banner背景，且能看到添加好的标题、文字、按钮等。

如果愿意花时间的话可以细细打磨颜色、样式、布局等，让整体看起来更协调。

4、总结

Elementor视频元素可以作为 banner、内容填充、背景等形式出现，一般放在外贸网站的 page页面中，作为比较重要的展示内容。可以调用第三方视频网站或者网站主机的视频作为来源。