Use Youtube/Vimeo/HTML5 Videos As A Fullscreen Background - youtube-background.js

Yet another jQuery/Vanilla JS Video Background plugin which makes Youtube/Vimeo/HTML5 videos behavior like a covering background.

Fully responsive and automatically adjusts the aspect ratio to fit the screen size after the viewport changed.

How to use it:

1. To use the plugin, include the JavaScript jquery.youtube-background.js after the latest jQuery library (OPTIONAL).

<!-- 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. Embed a Youtube, Vimeo, or HTML5 video into the document by insert the video URL in the data-vbg attribute:

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

3. Call the function to make the Youtube video fullscreen and act as a background. That's it.

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

// As a Vanilla JS Plugin
new VideoBackgrounds('[data-vbg]');

4. Auto disable the video background on the mobile. Default: false.

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

5. Display Play & Mute button on the Video. Default: false.

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

6. Determine whether to load and display the video cover as the background before loading the Youtube video player. Default: true.

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

7. Determine whether to auto play the video on page load. Default: true.

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

8. Determine whether the video should be muted on page load. Default: true.

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

9. Determine whether to loop the video. Default: true.

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

10. Determine the resolution of the video. Default: '16:9'.

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

11. Determine the offset in pixels. Useful to enlarge the video to hide the info elements. Default: '200'.

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

12. Determine whether or not to set the player iframe to fit the container. Default: false.

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

13. Enable/disable inline styles from the iframe and wrapper. Default: true.

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

14. Set in seconds when the background video will start & end. Default: 0.

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

15. Override the default poster image. Default: null.

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

16. You're also allowed to pass the options via HTML data-vbg-* attributes:

• data-vbg-play-button
• data-vbg-mute-button
• data-vbg-autoplay
• data-vbg-mooted
• data-vbg-loop
• data-vbg-mobile
• data-vbg-load-background
• data-vbg-resolution
• data-vbg-offset
• data-vbg-fit-box
• data-vbg-inline-styles
• data-vbg-start-at
• data-vbg-end-at
• data-vbg-poster

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

17. Event handlers.

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
});

Changelog:

v1.0.14 (2022-01-16)

• Very minor update: If the parent element is position absolute, fixed, sticky or relative, don't add the inline rule position: relative.

v1.0.13 (2021-12-16)

• Removed experimental feature ActivityMonitor from the build.

v1.0.12 (2021-12-15)

• Added partial support for Vimeo videos
• Added partial support for HTML5 videos
• Added optional ResizeObserver for recalculating video resolution and placement on resize of the containing element
• Next to data-youtube and data-ytbg-, it now accepts data-vbg and data-vbg- attributes, this is a next step to transition this code to a more generalized version

v1.0.11 (2021-12-01)

• Introduced end-at property so you can set the at what time (in seconds) the video will end. The default value, 0, means video will play to the end. This way you can create short loops from youtube video backgrounds.

v1.0.10 (2021-11-14)

• Added events on play/pause and mute/unmute actions.
• Source element, the one with attribute data-youtube is no longer being replaced by a new element wrapping the iframe, but it becomes the wrapper instead. This way we can correctly listen to events.
• Fixed pause/play bug caused by carelessly introducing the start-at feature.

2021-11-12

• v1.0.9: 'start-at' property introduced - now you can set in seconds when the background video will start; bugfix

2020-03-28

• v1.0.8: Added more options.

2020-03-27

• v1.0.7: A bit of refactoring and bug fixes

2020-03-26

• Refactored in vanilla JS due to Youtube API event.target property naming changes the video was no longer resizing because the target iFrame could no longer be found.

2019-12-15

• Added more configs.

2019-12-10

• Fixed for mobile

2019-12-08

• Added an option to disable the plugin on mobile devices.
• Added an option that allows the visitor to pause the video.

---

This awesome jQuery plugin is developed by stamat. For more Advanced Usages, please check the demo page or visit the official website.