Youtube Video Background With Custom Controls - jQuery Zero-TV

File Size: 26.3 KB
Views Total: 2529
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">

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

3. Create the fullscreen background player.

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

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

var playlist = [

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