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

Use Youtube Videos As A Fullscreen Background - youtube-background.js
File Size: 9.28 KB
Views Total:
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 after the latest jQuery library (slim build is recommended).

<script src="" 
<script src=""></script>

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

<div id="ytbg" data-youtube=""></div>

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


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

    'mobile': true

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

    '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.

    'load-background': false

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

    'autoplay': false

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

    'muted': false

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

    'loop': false

10. 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
<div id="ytbg" data-ytbg-play-button="true" data-youtube=""></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



  • Added more configs.


  • Fixed for mobile


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