还有另一个jQuery/Vanilla JS视频背景插件，它使Youtube/Vimeo/HTML5视频的行为像一个覆盖背景。

完全响应，并在视口更改后自动调整纵横比以适应屏幕大小。

如何使用它:

1.要使用插件，请包含JavaScriptjquery.youtube-背景.js在最新的jQuery库之后（可选）。

<!-- jQuery Is Optional -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Core JS -->
<script src="/path/to/jquery.youtube-background.js"></script>

2.将Youtube、Vimeo或HTML5视频嵌入到文档中，方法是将视频URL插入数据vbg属性：

<div data-vbg="https://www.youtube.com/watch?v=IFSp2-CmQvk"></div>

3.调用函数，使Youtube视频全屏显示并作为背景。就是这样。

// As a jQuery Plugin
$(function(){
  jQuery('[data-vbg]').youtube_background();
});
 
// As a Vanilla JS Plugin
new VideoBackgrounds('[data-vbg]');

4.自动禁用手机上的视频背景。默认值：false。

$(function(){
  jQuery('[data-vbg]').youtube_background({
    'mobile': true
  });
});

5.在视频上显示“播放和静音”按钮。默认值：false。

$(function(){
  jQuery('[data-vbg]').youtube_background({
    'play-button': true,
    'mute-button': true
  });
});

6.在加载Youtube视频播放器之前，确定是否加载并显示视频封面作为背景。默认值：true。

$(function(){
  jQuery('[data-vbg]').youtube_background({
    'load-background': false
  });
});

7.确定是否在页面加载时自动播放视频。默认值：true。

$(function(){
  jQuery('[data-vbg]').youtube_background({
    'autoplay': false
  });
});

8.确定视频是否应该在页面加载时静音。默认值：true。

$(function(){
  jQuery('[data-vbg]').youtube_background({
    'muted': false
  });
});

9.确定是否循环播放视频。默认值：true。

$(function(){
  jQuery('[data-vbg]').youtube_background({
    'loop': false
  });
});

10.确定视频的分辨率。默认值：“16:9”。

$(function(){
  jQuery('[data-vbg]').youtube_background({
    'resolution': '16:9'
  });
});

11.以像素为单位确定偏移。用于放大视频以隐藏信息元素。默认值：“200”。

$(function(){
  jQuery('[data-vbg]').youtube_background({
    'offset': 200
  });
});

12.确定是否将玩家iframe设置为适合容器。默认值：false。

$(function(){
  jQuery('[data-vbg]').youtube_background({
    'fit-box': true
  });
});

13.从iframe和包装器启用/禁用内联样式。默认值：true。

$(function(){
  jQuery('[data-vbg]').youtube_background({
    'inline-styles': true
  });
});

14.以秒为单位设置背景视频的开始和结束时间。默认值：0。

$(function(){
  jQuery('[data-vbg]').youtube_background({
    'start-at': 2,
    'end-at': 0
  });
});

15.覆盖默认海报图像。默认值：null。

$(function(){
  jQuery('[data-vbg]').youtube_background({
    'poster': '/path/to/poster/image/',
  });
});

16.您还可以通过HTML传递选项数据vbg-*属性：

• 数据vbg播放按钮
• 数据vbg静音按钮
• 数据vbg自动播放
• 数据vbg已讨论
• 数据vbg循环
• 数据vbg移动
• 数据vbg加载后台
• 数据vbg分辨率
• 数据vbg偏移
• 数据vbg拟合框
• 数据vbg内联样式
• 数据vbg起始于
• 数据vbg结束于
• 数据vbg海报

<div data-vbg-play-button="true" data-vbg="https://www.youtube.com/watch?v=IFSp2-CmQvk"></div>

17.事件处理程序。

document.querySelector('[data-vbg]').addEventListener('video-background-play', function(){
  //  do something
});
 
document.querySelector('[data-vbg]').addEventListener('video-background-pause', function(){
  //  do something
});
 
document.querySelector('[data-vbg]').addEventListener('video-background-mute', function(){
  //  do something
});
 
document.querySelector('[data-vbg]').addEventListener('video-background-unmute', function(){
  //  do something
});

更新日志：

v1.0.14 (2022-01-16)

• 非常小的更新：如果父元素是position absolute、fixed、stick或relative，则不要添加内联规则position:relative。

v1.0.13 (2021-12-16)

• 从构建中删除了实验功能ActivityMonitor。

1.0.12版（2021-12-15）

• 添加了对Vimeo视频的部分支持
• 增加了对HTML5视频的部分支持
• 添加了可选的ResizeObserver，用于重新计算视频分辨率和调整包含元素大小时的位置
• 除了数据youtube和数据ytbg-，它现在接受数据vbg和数据vbg-属性，这是将此代码转换为更通用版本的下一步

1.0.11版（2021-12-01）

• 引入了end at属性，因此您可以设置视频结束的时间（以秒为单位）。默认值0表示视频将播放到最后。通过这种方式，您可以从youtube视频背景中创建短循环。

1.0.10版（2021-11-14）

• 添加了播放/暂停和静音/取消静音操作的事件。
• 源元素，即具有属性数据youtube的元素，不再被包装iframe的新元素所取代，而是变成了包装器。通过这种方式，我们可以正确地倾听事件。
• 修正了由于不小心引入启动功能而导致的暂停/播放错误。

2021-11-12

• v1.0.9：引入了“start at”属性-现在您可以在几秒钟内设置背景视频的启动时间；错误修复程序

2020-03-28

• v1.0.8：添加了更多选项。

2020-03-27

• v1.0.7：一点重构和错误修复

2020-03-26

• 由于Youtube API事件，在vanilla JS中进行了重构。目标属性命名更改，视频不再调整大小，因为无法再找到目标iFrame。

2019-12-15

• 添加了更多配置。

2019-12-10

• 固定用于移动

2019-12-08

• 添加了一个选项来禁用移动设备上的插件。
• 添加了一个选项，允许访问者暂停视频。

预览截图

Youtube/Vimeo/HTML5视频作为全屏背景 Youtube Background.js