YTPlayer is a jQuery plugin that allows you to use a youtube video as the background of your web page using html5 data-* attributes and youtube API. You can also use this plugin as a normal video player for your web page.
Các thành phần cơ bản:
Basic Usage:

1. JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="inc/jquery.mb.YTPlayer.js"></script>

2. CSS

<link href="css/YTPlayer.css" media="all" rel="stylesheet" type="text/css">

3. Call the plugin

<script>
jQuery(function(){
    jQuery(".player").mb_YTPlayer();
});
</script>

4. Initialize a YTPlayer as background

<a class="player" data-property="{videoURL:'BsekcY04xvQ',containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1}">My video</a>

Trong đó:

opacity: 1 //(int) 0 → Set the opacity of the player;
mute: true //(boolean) mute the audio;
showControls: true // or false If you set the player as background you can show controls adding this parameter;
ratio: ‘4/3’ // or “16/9” to set the aspect ratio of the movie;
quality: ‘default’ // or “small”, “medium”, “large”, “hd720”, “hd1080”, “highres”;
containment: (string) // the CSS selector of the DOM element where you want the video background; if not specified it takes the “body”; if set to “self” the player will be instanced on that element;
optimizeDisplay: true // (boolean) will fit the video size into the window size optimizing the view;
loop: true // (boolean) or false loops the movie once ended.
startAt: 20 // (int) Set the seconds the video should start at.
showYTLogo: true // (boolean) Show or hide the YT logo and the link to the original video URL.
showControls: true // (boolean) Show or hide the controls bar at the bottom of the page.

matteo@open-lab.com

http://jsbin.com/caxoj/1/
Video Background Plugin with HTML5 and Youtube API - YTPlayer

My video