Lightweight jQuery Youtube Video Player - simplePlayer.js

simplePlayer.js is a lighweight jQuery plugin that makes it easy to embed Youtube Videos in your webpage, with custom Play button, screenshot and player controls.

See also:

• Slick and Customizable jQuery Youtube Player Widget - Youtube TV
• jQuery Plugin For Embedded Youtube or HTML5 Videos - PragmaticPlayerJs
• Responsive and Fluid YouTube Videos - fluidvids.js

How to use it:

1. Import jQuery library and the jQuery simplePlayer.js script into your webpage.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="simplePlayer.js"></script>

2. Insert your YouTube video ID into the data-video attribute and add a custom screenshot for the player.

<div data-video="be0aFAqIhXk" id="video">
  <img src="screenshot.jpg" alt="Use your own screenshot.">
</div>

3. A little bit CSS to style the Youtube player.

#video {
  position: relative;
  background: #000;
  width: 640px;
  margin: 20px auto;
}

#video img,
#video iframe { display: block; }

#play {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: url('play-button.png') no-repeat 50% 50%;
  background-size: auto, cover;
  z-index: 9999;
}

#play:hover { background-color: rgba(0,0,0,0.2) !important; }

4. Initialize the Youtube player.

$("document").ready(function() {
  $("#video").simplePlayer();
});

5. Config the plugin.

$("#video").simplePlayer({

autoplay: 1,
autohide: 1,
border: 0,
wmode: 'opaque',
enablejsapi: 1,
modestbranding: 1,
version: 3,
hl: 'en_US',
rel: 0,
showinfo: 0,
hd: 1,
iv_load_policy: 3 // add origin

});

---

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