Youtube Video Background With Custom Controls - jQuery ytbgnav.js

ytbgnav.js is a jQuery plugin that utilizes Youtube Player API to create a fullscreen Youtube video background with custom controls and playlist for your webpage.

Features:

• Click on the 'Play' button to display the Youtube video in a popup window.
• Allows to switch between predefined Youtube videos.
• Allows to mute / unmute the Youtube videos.

How to use it:

1. Include jQuery library together with YouTube JavaScript Player API and the jQuery ytbgnav.js plugin on the webpage.

<link rel="stylesheet" href="css/ytbgnav.css">
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="http://www.youtube.com/player_api"></script>
<script src="js/ytbgnav.js"></script>

2. Add the Youtube Player and custom video controls to the webpage.

<div class="top_box">
  <div class="title">Title</div>
  <div class="btn_pop"></div>
  <div class="btn_vol on"></div>
  <div class="bg_dot"></div>
  <div id="player"></div>
  <ul class="control">
    <li class="on">Video 1</li>
    <li>Video 2</li>
    <li>Video 3</li>
    <li>Video 4</li>
    <li>Video 5</li>
  </ul>
</div>

3. Create a popup window for the Youtube video player.

<div class="pop_yt" style="display:none">
	<div class="close"></div>
	<iframe width="960" height="540" src="" frameborder="0" allowfullscreen></iframe>
</div>
<div class="pop_overlay" ></div>

4. Add custom Youtube video IDs to the playlist as follows.

var bgID = ["q6f-LLM1H6U","qEYOyZVWlzs","R1-BTf3_Mys","N5wzkQvzp4c","9ZC4sPxMQ_M"];
var popID = ["56hGcCt0NuU","srK7Vj5p9Tg","18fSsOulNYw","cSxrDMADfJA","bhKFSXN2Fr4"];

---

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