Youtube Video Background With Custom Controls - jQuery Zero-TV

Zero-TV is a jQuery plugin that allows you to use Youtube videos as a background for your webpage, with support for custom video controls and playlist.

How to use it:

1. Load jQuery library and other required JS & CSS resources in the webpage.

<link rel="stylesheet" href="css/controls.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/about.css">
<script src="jquery.min.js"></script>
<script src="js/player.js"></script>
<script src="js/playlist.js"></script>
<script src="js/controls.js"></script>

2. Create the player controls.

<nav id="menu" class="visible">
  <header id="zero">
    <h2>zero-tv</h2>
  </header>

  <ul id="playercontrols">
    <li id="nowplaying"></li>
    <li class="ctrl prevvid"><span>Previous</span></li>
    <li class="ctrl playvid true"><span>Play/Pause</span></li>
    <li class="ctrl nextvid"><span>Next</span></li>
    <li class="ctrl mute"><span>mute</span></li>
    <li class="ctrl loopvid"><span>loop</span></li>
    <li id="volumecontrol"><div class="volumegutter"><div class="volumebar" style="width: 20%;"></div></div></li>
  </ul>
</nav>

3. Create the fullscreen background player.

<div id="masking"></div>
<section id="bezel">
  <div id="tv" class="screen"></div>
</section>

4. Override the default Youtube videos in the playlist.js.

var playlist = [
    'Y62EgHvwa8k',
    'u61F_qvdid0', 
    'EbuPaCgdO50', 
    'k4rpsE4WnpU', 
    '0123456789a', 
    'oQaasxr3zWY',
    'yr_Rpk9HR1g', 
    'HSQ03mfV5ms', 
    's_IHi3u7b8w', 
    '9hO8Cq5KPxc',
    'c9GU4P-1AWI', 
    'rtChPB6NjJY', 
    'i9TsmU9-e3E', 
    '1mA7BbliyL8',
    'W3abMUH_P1E', 
    'i7gIpuIVE3k'
  ];

---

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