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

Use Youtube Videos As A Fullscreen Background - youtube-background.js
File Size: 11.4 KB
Views Total: 5290
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Yet another jQuery Youtube Video Background plugin which makes Youtube 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 (slim build is recommended).

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<script src="jquery.youtube-background.js"></script>

2. Embed a Youtube video into the document by insert the video URL in the data-youtube attribute:

<div id="ytbg" data-youtube="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.

$(function(){
  $('[data-youtube]').youtube_background();
});

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

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

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

$(function(){
  $('[data-youtube]').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(){
  $('[data-youtube]').youtube_background({
    'load-background': false
  });
});

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

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

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

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

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

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

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

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

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

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

12. You're also allowed to pass the options via HTML data attributes:

  • data-ytbg-play-button
  • data-ytbg-mute-button
  • data-ytbg-autoplay
  • data-ytbg-mooted
  • data-ytbg-loop
  • data-ytbg-mobile
  • data-ytbg-load-background
  • data-ytbg-resolution
  • data-ytbg-offset
<div id="ytbg" data-ytbg-play-button="true" data-youtube="https://www.youtube.com/watch?v=IFSp2-CmQvk"></div>

11. Override the default video player settings (loop, mute, autoplay, show/hide controls, etc).

ytp = new YT.Player($elem[0], {
  height: '1080',
  width: '1920',
  videoId: ytid,
  playerVars: {
    'controls': 0,
    'autoplay': 1,
    'mute': 1,
    'loop': 1,
    'rel': 0,
    'showinfo': 0,
    'modestbranding': 1
  },
  events: {
    'onReady': onVideoPlayerReady,
    'onStateChange': onVideoStateChange
  }
});

Changelog:

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.