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

Use Youtube Videos As A Fullscreen Background - youtube-background.js
File Size: 6.23 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. Override the default video 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

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