You Tube Player - YTPlayer - jQuery.mb.YTPlayer (HTML5 API)

Background movie using YT videos HTML5 embed API.

by bizamajig

HTML

<div style="position:absolute; top:0;left:0;z-index:10">
            <h1 style="color:white"> this YTPlayer uses the new iframe embed for HTML5 compability </h1>
            <h2 style="color:white">video: Dan Graham, Body Press, 1972.</h2>
            <h2 style="color:white">Once in fullscreen press ESC to exit.</h2>
        </div>
        
        <div id="P1" class="player" style="" data-property="{videoURL:'3ovA7zeviRo',containment:'self',autoPlay:true, startAt:40, opacity:.7}">
            <span style="color:white; padding:10px;">test</span>
            <div class="controls">
                <button onclick="$('#P1').getPlayer().playVideo()">play</button>
                <button onclick="$('#P1').getPlayer().pauseVideo()">pause</button>
                <button onclick="$('#P1').fullScreen()">fullScreen</button>

            </div>
        </div>

<script>
    
    $(function(){
        $(".player").buildYTPlayer();
    })
    
</script>

CSS

body{
            border:none;
            margin:0;
            padding:0;
            background: #3e1f02;
            }
            
            .player{
            display:inline-block;
            vertical-align:top;
            position:relative;
            width:500px;
            height:350px;
            top:100px;
            left:0;
            }
            
            .YTPOverlay{
            background:url("images/raster.png");
            }
            
            .fullScreen{
            position:fixed!important;
            z-index:10000!important;
            top:0!important;
            left:0!important;
            width:100%!important;
            height:100%!important;
            }
            
            .controls{
            position:absolute;
            bottom:-40px;
            }

JavaScript

String.prototype.getVideoID = function() {
    return this.indexOf("http") > -1 ? this.match(/[\\?&]v=([^&#]*)/)[1] : this;
};


function onYouTubePlayerAPIReady() {
    $(document).trigger("YTAPIReady");
    $.mbYTPlayer.YTAPIReady = true;
}


/*
            *
            * YT videos thumb: http://img.youtube.com/vi/3ovA7zeviRo/0.jpg 1/2/3
            *
            * */

(function($) {

    $.mbYTPlayer = {
        name: "jquery.mb.YTPlayer",
        version: "2.0",
        author: "Matteo Bicocchi",
        defaults: {
            containment: "body",
            chromeLess: true,
            forceHTML5: true,
            showYTLogo: false,
            videoURL: null,
            startAt: 0,
            autoPlay: true,
            videoWidth: false,
            opacity: 1,

            onReady: function(event) {},
            onStateChange: function(event) {},
            onPlaybackQualityChange: function(event) {},
            onError: function(event) {}

        },
        buildPlayer: function(options) {

            return this.each(function() {
                var $this = $(this);

                this.opt = {};

                var property = $this.data("property") ? eval('(' + $this.data("property") + ')') : {};
                $.extend(this.opt, $.mbYTPlayer.defaults, options, property);

                if (!$this.attr("id")) {
                    $this.attr("id", "id_" + new Date().getTime());
                }

                var playerID = "mbYTP_" + $this.attr("id");
                var videoID = this.opt.videoURL ? this.opt.videoURL.getVideoID() : $this.attr("href") ? $this.attr("href").getVideoID() : false;
                var playerVars = {
                    'autoplay': 0,
                    'controls': 0,
                    wmode: "transparent",
                    showinfo: this.opt.chromeLess ? 0 : 1,
                    enablejsapi: 1,
                    playerapiid: playerID,
                    origin: document.domain
               ...