Anubarak/Youtube.js

## Youtube.js
$('.youtube-player').youtube();

/**
 * Youtube Plugin
 */
(function ($, window, document, undefined) {
    var pluginName = 'youtube';
    var scriptLoaded = false;
    var isTouch = 'ontouchstart' in window,
        eStart = isTouch ? 'touchstart' : 'mousedown',
        eMove = isTouch ? 'touchmove' : 'mousemove',
        eEnd = isTouch ? 'touchend' : 'mouseup',
        eCancel = isTouch ? 'touchcancel' : 'mouseup';

    function Plugin(element, options) {
        this.element = element;
        this._name = pluginName;
        this._defaults = $.fn.youtube.defaults;
        this.playing = false;


        for (var subName in this._defaults.cssClassSub) {
            this._defaults.cssClass[subName] = this._defaults.classPrefix + '-' + this._defaults.cssClassSub[subName];
        }
        if (typeof this._defaults.youtubePlayerOptions.events === 'undefined') {
            this._defaults.youtubePlayerOptions.events = {};
        }

        this.options = $.extend({}, this._defaults, options);

        this.init();
    }

    $.extend(Plugin.prototype, {
        $player: null,
        $image: null,
        $iFrame: null,
        lastAction: null,
        playing: null,
        $container: null,
        currentPlayerState: null,
        $progressbar: null,

        autoplay: false,
        initialized: false,
        isAdjusting: false,
        playerOptions: {},
        init: function () {
            this.buildCache();
            this.id = this.$element.attr('id');
            if (typeof this.id === 'undefined' || this.id === null) {
                throw new Error('Youtube Videos must have an ID in order to be selectable by Youtube');
            }
            // check if there is an image that triggers everything or if it should be
            // loaded directly
            if (this.$image.length === 0) {
                this.initVideo();
            } else {
                this.$image.on('click' + '.' + this._name, function (event) {
                    event.preventDefault();
                    this.autoplay = true;
                    if (this.initialized === false) {
                        this.initVideo();
                    } else {
                        this.$player.playVideo();
                        this.toggleView();
                    }

                }.bind(this));
            }
        },
        toggleView: function (force) {
            if (this.$image.length !== 0) {
                if (typeof force === 'undefined') {
                    if (this.$player.getPlayerState() === 1) {
                        this.$iFrameWrap.hide();
                        this.$controls.hide();
                        this.$image.show();
                    } else {
                        this.$iFrameWrap.show();
                        this.$controls.show();
                        this.$image.hide();
                    }
                } else {
                    if (force === false) {
                        this.$iFrameWrap.hide();
                        this.$controls.hide();
                        this.$image.show();
                    } else {
                        this.$iFrameWrap.show();
                        this.$controls.show();
                        this.$image.hide();
                    }
                }
            }
        },
        createPlayer: function () {
            this.$player = new YT.Player(this.$element.attr('id'), this.playerOptions);
            //this.$element.data('player', this.$player);
            this.bindEvents();
        },
        initVideo: function () {
            this.initialized = true;
            this.playerOptions = this.options.youtubePlayerOptions;
            this.videoId = this.$element.data('youtube-id');
            if (typeof this.videoId === 'undefined' || this.videoId === null) {
                throw new Error('The element must have a Youtube ID');
            }
            this.playerOptions.videoId = this.videoId;
            this.playerOptions.events['onStateChange'] = this.onStateChange.bind(this);
            this.playerOptions.events['onReady'] = this.onReady.bind(this);

            if (scriptLoaded === false) {
                var tag = document.createElement('script');
                tag.src = "https://www.youtube.com/iframe_api";
                var firstScriptTag = document.getElementsByTagName('script')[0];
                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
                Garnish.$bod.on('youtubeReady', function () {
                    scriptLoaded = true;
                    this.createPlayer();
                }.bind(this));
            } else {
                this.createPlayer();
            }
        },
        buildCache: function () {
            this.$element = $(this.element);
            this.$container = this.$element.closest('.videoplayer-container');
            this.$iFrameWrap = this.$element.closest('.iframe-wrap');
            this.$image = this.$container.find('.videoplayer-play-link');
            this.$controls = this.$container.find('.videoplayer');
            if (this.$image.length !== 0) {
                this.$controls.hide();
            } else {
                this.$controls.show();
            }
            this.$playPause = this.$container.find('.videoplayer-playpause');
            this.$progressbar = this.$container.find('.videoplayer-bar-loaded');

            this.$bar = this.$container.find('.' + this.options.cssClass.bar);
            this.$barPlayed = this.$container.find('.' + this.options.cssClass.barPlayed);
            this.$barLoaded = this.$container.find('.' + this.options.cssClass.barLoaded);
            this.$timeCurrent = this.$container.find('.' + this.options.cssClass.timeCurrent);

            this.$timeDuration = this.$container.find('.' + this.options.cssClass.timeDuration);
            this.$volumeButton = this.$container.find('.' + this.options.cssClass.volumeButton);
            this.$volumeAdjuster = this.$container.find('.' + this.options.cssClass.volumeAdjust + ' > div');
            this.$volumeBar = this.$container.find('.' + this.options.cssClass.volumeBar);
        },
        onReady: function () {
            this.$iFrame = $(this.$player.getIframe());
            this.$iFrame.data(pluginName, this);
            if (this.autoplay === true) {
                this.$player.playVideo();
            }
            this.$volumeBar.width(this.$player.getVolume() + '%');
            this.toggleView(true);
            this.updateTimerDisplay();
        },
        onStateChange: function (event) {
            switch (event.data) {
                case 0: // 0 (beendet)
                    clearInterval(this.timerInterval);
                    this.$playPause.removeClass(this.options.cssClass.iconPlay);
                    this.$playPause.addClass(this.options.cssClass.iconPause);
                    break;
                case 1: // 1 (wird wiedergegeben)
                    this.startInterval();
                    this.$playPause.removeClass(this.options.cssClass.iconPlay);
                    this.$playPause.addClass(this.options.cssClass.iconPause);
                    break;
                case 2: // 2 (pausiert)
                    clearInterval(this.timerInterval);
                    this.$playPause.removeClass(this.options.cssClass.iconPause);
                    this.$playPause.addClass(this.options.cssClass.iconPlay);
                    if (this.isAdjusting === false) {
                        this.toggleView(false);
                    }
                    break;
                case 3: // 3 (wird gepuffert)
                    clearInterval(this.timerInterval);
                    this.$playPause.removeClass(this.options.cssClass.iconPlay);
                    this.$playPause.addClass(this.options.cssClass.iconPause);
                    break;
                case 5: // 5 (Video positioniert)
                    clearInterval(this.timerInterval);
                    this.$playPause.removeClass(this.options.cssClass.iconPlay);
                    this.$playPause.addClass(this.options.cssClass.iconPause);
                    break;
            }
        },
        bindEvents: function () {
            this.$playPause.on('click' + '.' + this._name, function (event) {
                event.preventDefault();
                var state = this.$player.getPlayerState();
                switch (state) {
                    case 1:
                        this.$player.pauseVideo();
                        this.toggleView();
                        break;
                    case 2:
                        this.$player.playVideo();
                        break;
                    case 5:
                        this.$player.playVideo();
                        break;
                }
            }.bind(this));

            this.$bar.on(eStart + '.' + this._name, function (e) {
                this.isAdjusting = true;
                this.$player.pauseVideo();
                this.adjustCurrentTime(e);
                this.$bar.on(eMove + '.' + this._name, function (e) {
                    this.adjustCurrentTime(e);
                }.bind(this));
            }.bind(this))
                .on(eEnd + '.' + this._name, function () {
                    this.$bar.unbind(eMove + '.' + this._name);
                    this.$player.seekTo(this.adjustedTime);
                    this.updateTimerDisplay(this.adjustedTime);
                    this.$player.playVideo();
                    this.isAdjusting = false;
                }.bind(this));

            this.$volumeAdjuster.on(eStart + '.' + this._name, function (e) {
                this.adjustVolume(e);
                this.$volumeAdjuster.on(eMove + '.' + this._name, function (e) {
                    this.adjustVolume(e);
                }.bind(this));
            }.bind(this))
                .on(eEnd + '.' + this._name, function () {
                    this.$volumeAdjuster.unbind(eMove + '.' + this._name);
                    this.$player.setVolume(this.adjustedVolume);
                }.bind(this));

            this.$volumeButton.on('click.' + this._name, function () {
                if (typeof this.$player !== 'undefined') {
                    if (this.$player.isMuted()) {
                        this.$player.unMute();
                        this.$container.removeClass(this.options.cssClass.mute);
                    } else {
                        this.$container.addClass(this.options.cssClass.mute);
                        this.$player.mute();
                    }
                }
            }.bind(this));
        },
        startInterval: function () {
            clearInterval(this.timerInterval);
            this.timerInterval = setInterval(function () {
                this.updateTimerDisplay();
            }.bind(this), 1000);
        },
        formatTime: function (time) {
            time = Math.round(time);
            var minutes = Math.floor(time / 60),
                seconds = time - minutes * 60;
            seconds = seconds < 10 ? '0' + seconds : seconds;
            return minutes + ":" + seconds;
        },
        adjustVolume: function (e) {
            var theRealEvent = isTouch ? e.originalEvent.touches[0] : e;
            var volume = Math.abs((theRealEvent.pageX - this.$volumeAdjuster.offset().left) / this.$volumeAdjuster.width());
            this.adjustedVolume = volume * 100;
            this.$volumeBar.width(this.adjustedVolume + '%');
        },
        adjustCurrentTime: function (e) {
            var theRealEvent = isTouch ? e.originalEvent.touches[0] : e;
            var duration = this.$player.getDuration();
            this.adjustedTime = Math.round((duration * (theRealEvent.pageX - this.$bar.offset().left)) / this.$bar.width());
            this.updateTimerDisplay(this.adjustedTime);
        },
        updateTimerDisplay: function (time) {
            // stop if no current time is given and players are null
            if (typeof time === 'undefined' && (this.$player === null ||
                    typeof this.$player.getPlayerState !== 'function' ||
                    this.$player.getPlayerState() !== 1)) {
                return;
            }

            var currentTime = typeof time === 'undefined' ? this.$player.getCurrentTime() : time;
            var duration = this.$player.getDuration();

            var currentTimeFormat = this.formatTime(currentTime);
            this.$timeCurrent.text(currentTimeFormat);
            this.$timeDuration.text(this.formatTime(this.$player.getDuration()));
            this.$barPlayed.width((currentTime / duration) * 100 + '%');
        },
        playVideo: function () {
            var plugin = this;
            plugin.$container.addClass(plugin.options.containerPlayingClass);
            plugin.$player.playVideo();
        },
        destroy: function () {
            console.log('destroy');
            this.unbindEvents();
            this.$image.removeData();
            this.$player.destroy();
            this.$player = null;

            this.$container.removeClass('playing');
        },
        unbindEvents: function () {
            this.$image.off('.' + this._name);
        }
    });

    $.fn.youtube = function (options) {
        this.each(function () {
            var e = $(this);
            if (!e.data(pluginName)) {
                e.data(pluginName, new Plugin(this, options));
            }
        });

        return this;
    };

    $.fn.youtube.defaults = {
        youtubePlayerOptions: {
            height: '315',
            width: '560',
            playerVars: {
                rel: 0,
                controls: 0
            }
        },
        classPrefix: 'videoplayer',
        cssClass: {
            iconPlay: 'icon-play',
            iconPause: 'icon-pause'
        },
        containerPlayingClass: 'playing',
        cssClassSub: {
            playPause: 'playpause',
            playing: 'playing',
            time: 'time',
            timeCurrent: 'time-current',
            timeDuration: 'time-duration',
            bar: 'bar',
            barLoaded: 'bar-loaded',
            barPlayed: 'bar-played',
            volume: 'volume',
            volumeButton: 'volume-button',
            volumeAdjust: 'volume-adjust',
            volumeBar: 'volume-bar',
            noVolume: 'novolume',
            mute: 'mute',
            mini: 'mini'
        }

    }
})(jQuery, window, document);

function onYouTubeIframeAPIReady() {
    Garnish.$bod.trigger('youtubeReady');
}


 <div class="content-part video media even">
	<div class="content size videoplayer-container">
		<h2>Test Video</h2>
		<figure class="media-wrap">
			<a href="" title="Video abspeielen" class="video-wrap shadow videoplayer-play-link">
				<span class="icon-play circle"><i class="bg"></i><em>Video abspeielen</em></span>
				<img src="some url"/>
			</a>

			<div class="iframe-wrap" style="display: none">
				<div class="youtube-player" data-youtube-id="WrAV5EVI4tU" id="29421423"></div>
			</div>
		</figure>
		<div class="videoplayer">
			<div class="" title="">
				<a href="#" class="videoplayer-playpause icon-play"></a>
			</div>
			<div class="videoplayer-time videoplayer-time-current">00:00</div>
			<div class="videoplayer-bar">
				<div class="videoplayer-bar-loaded" style="width: 100%;"></div>
				<div class="videoplayer-bar-played"></div>
			</div>
			<div class="videoplayer-time videoplayer-time-duration">00:02</div>
				<div class="videoplayer-volume">
					<div class="videoplayer-volume-button" title="">
						<a href="#" class="icon-audio"></a>
					</div>
				<div class="videoplayer-volume-adjust">
					<div>
						<div class="videoplayer-volume-bar" style="width: 100%;"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
	$('.youtube-player').youtube();

	/**
	* Youtube Plugin
	*/
	(function ($, window, document, undefined) {
	var pluginName = 'youtube';
	var scriptLoaded = false;
	var isTouch = 'ontouchstart' in window,
	eStart = isTouch ? 'touchstart' : 'mousedown',
	eMove = isTouch ? 'touchmove' : 'mousemove',
	eEnd = isTouch ? 'touchend' : 'mouseup',
	eCancel = isTouch ? 'touchcancel' : 'mouseup';

	function Plugin(element, options) {
	this.element = element;
	this._name = pluginName;
	this._defaults = $.fn.youtube.defaults;
	this.playing = false;


	for (var subName in this._defaults.cssClassSub) {
	this._defaults.cssClass[subName] = this._defaults.classPrefix + '-' + this._defaults.cssClassSub[subName];
	}
	if (typeof this._defaults.youtubePlayerOptions.events === 'undefined') {
	this._defaults.youtubePlayerOptions.events = {};
	}

	this.options = $.extend({}, this._defaults, options);

	this.init();
	}

	$.extend(Plugin.prototype, {
	$player: null,
	$image: null,
	$iFrame: null,
	lastAction: null,
	playing: null,
	$container: null,
	currentPlayerState: null,
	$progressbar: null,

	autoplay: false,
	initialized: false,
	isAdjusting: false,
	playerOptions: {},
	init: function () {
	this.buildCache();
	this.id = this.$element.attr('id');
	if (typeof this.id === 'undefined' \|\| this.id === null) {
	throw new Error('Youtube Videos must have an ID in order to be selectable by Youtube');
	}
	// check if there is an image that triggers everything or if it should be
	// loaded directly
	if (this.$image.length === 0) {
	this.initVideo();
	} else {
	this.$image.on('click' + '.' + this._name, function (event) {
	event.preventDefault();
	this.autoplay = true;
	if (this.initialized === false) {
	this.initVideo();
	} else {
	this.$player.playVideo();
	this.toggleView();
	}

	}.bind(this));
	}
	},
	toggleView: function (force) {
	if (this.$image.length !== 0) {
	if (typeof force === 'undefined') {
	if (this.$player.getPlayerState() === 1) {
	this.$iFrameWrap.hide();
	this.$controls.hide();
	this.$image.show();
	} else {
	this.$iFrameWrap.show();
	this.$controls.show();
	this.$image.hide();
	}
	} else {
	if (force === false) {
	this.$iFrameWrap.hide();
	this.$controls.hide();
	this.$image.show();
	} else {
	this.$iFrameWrap.show();
	this.$controls.show();
	this.$image.hide();
	}
	}
	}
	},
	createPlayer: function () {
	this.$player = new YT.Player(this.$element.attr('id'), this.playerOptions);
	//this.$element.data('player', this.$player);
	this.bindEvents();
	},
	initVideo: function () {
	this.initialized = true;
	this.playerOptions = this.options.youtubePlayerOptions;
	this.videoId = this.$element.data('youtube-id');
	if (typeof this.videoId === 'undefined' \|\| this.videoId === null) {
	throw new Error('The element must have a Youtube ID');
	}
	this.playerOptions.videoId = this.videoId;
	this.playerOptions.events['onStateChange'] = this.onStateChange.bind(this);
	this.playerOptions.events['onReady'] = this.onReady.bind(this);

	if (scriptLoaded === false) {
	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
	Garnish.$bod.on('youtubeReady', function () {
	scriptLoaded = true;
	this.createPlayer();
	}.bind(this));
	} else {
	this.createPlayer();
	}
	},
	buildCache: function () {
	this.$element = $(this.element);
	this.$container = this.$element.closest('.videoplayer-container');
	this.$iFrameWrap = this.$element.closest('.iframe-wrap');
	this.$image = this.$container.find('.videoplayer-play-link');
	this.$controls = this.$container.find('.videoplayer');
	if (this.$image.length !== 0) {
	this.$controls.hide();
	} else {
	this.$controls.show();
	}
	this.$playPause = this.$container.find('.videoplayer-playpause');
	this.$progressbar = this.$container.find('.videoplayer-bar-loaded');

	this.$bar = this.$container.find('.' + this.options.cssClass.bar);
	this.$barPlayed = this.$container.find('.' + this.options.cssClass.barPlayed);
	this.$barLoaded = this.$container.find('.' + this.options.cssClass.barLoaded);
	this.$timeCurrent = this.$container.find('.' + this.options.cssClass.timeCurrent);

	this.$timeDuration = this.$container.find('.' + this.options.cssClass.timeDuration);
	this.$volumeButton = this.$container.find('.' + this.options.cssClass.volumeButton);
	this.$volumeAdjuster = this.$container.find('.' + this.options.cssClass.volumeAdjust + ' > div');
	this.$volumeBar = this.$container.find('.' + this.options.cssClass.volumeBar);
	},
	onReady: function () {
	this.$iFrame = $(this.$player.getIframe());
	this.$iFrame.data(pluginName, this);
	if (this.autoplay === true) {
	this.$player.playVideo();
	}
	this.$volumeBar.width(this.$player.getVolume() + '%');
	this.toggleView(true);
	this.updateTimerDisplay();
	},
	onStateChange: function (event) {
	switch (event.data) {
	case 0: // 0 (beendet)
	clearInterval(this.timerInterval);
	this.$playPause.removeClass(this.options.cssClass.iconPlay);
	this.$playPause.addClass(this.options.cssClass.iconPause);
	break;
	case 1: // 1 (wird wiedergegeben)
	this.startInterval();
	this.$playPause.removeClass(this.options.cssClass.iconPlay);
	this.$playPause.addClass(this.options.cssClass.iconPause);
	break;
	case 2: // 2 (pausiert)
	clearInterval(this.timerInterval);
	this.$playPause.removeClass(this.options.cssClass.iconPause);
	this.$playPause.addClass(this.options.cssClass.iconPlay);
	if (this.isAdjusting === false) {
	this.toggleView(false);
	}
	break;
	case 3: // 3 (wird gepuffert)
	clearInterval(this.timerInterval);
	this.$playPause.removeClass(this.options.cssClass.iconPlay);
	this.$playPause.addClass(this.options.cssClass.iconPause);
	break;
	case 5: // 5 (Video positioniert)
	clearInterval(this.timerInterval);
	this.$playPause.removeClass(this.options.cssClass.iconPlay);
	this.$playPause.addClass(this.options.cssClass.iconPause);
	break;
	}
	},
	bindEvents: function () {
	this.$playPause.on('click' + '.' + this._name, function (event) {
	event.preventDefault();
	var state = this.$player.getPlayerState();
	switch (state) {
	case 1:
	this.$player.pauseVideo();
	this.toggleView();
	break;
	case 2:
	this.$player.playVideo();
	break;
	case 5:
	this.$player.playVideo();
	break;
	}
	}.bind(this));

	this.$bar.on(eStart + '.' + this._name, function (e) {
	this.isAdjusting = true;
	this.$player.pauseVideo();
	this.adjustCurrentTime(e);
	this.$bar.on(eMove + '.' + this._name, function (e) {
	this.adjustCurrentTime(e);
	}.bind(this));
	}.bind(this))
	.on(eEnd + '.' + this._name, function () {
	this.$bar.unbind(eMove + '.' + this._name);
	this.$player.seekTo(this.adjustedTime);
	this.updateTimerDisplay(this.adjustedTime);
	this.$player.playVideo();
	this.isAdjusting = false;
	}.bind(this));

	this.$volumeAdjuster.on(eStart + '.' + this._name, function (e) {
	this.adjustVolume(e);
	this.$volumeAdjuster.on(eMove + '.' + this._name, function (e) {
	this.adjustVolume(e);
	}.bind(this));
	}.bind(this))
	.on(eEnd + '.' + this._name, function () {
	this.$volumeAdjuster.unbind(eMove + '.' + this._name);
	this.$player.setVolume(this.adjustedVolume);
	}.bind(this));

	this.$volumeButton.on('click.' + this._name, function () {
	if (typeof this.$player !== 'undefined') {
	if (this.$player.isMuted()) {
	this.$player.unMute();
	this.$container.removeClass(this.options.cssClass.mute);
	} else {
	this.$container.addClass(this.options.cssClass.mute);
	this.$player.mute();
	}
	}
	}.bind(this));
	},
	startInterval: function () {
	clearInterval(this.timerInterval);
	this.timerInterval = setInterval(function () {
	this.updateTimerDisplay();
	}.bind(this), 1000);
	},
	formatTime: function (time) {
	time = Math.round(time);
	var minutes = Math.floor(time / 60),
	seconds = time - minutes * 60;
	seconds = seconds < 10 ? '0' + seconds : seconds;
	return minutes + ":" + seconds;
	},
	adjustVolume: function (e) {
	var theRealEvent = isTouch ? e.originalEvent.touches[0] : e;
	var volume = Math.abs((theRealEvent.pageX - this.$volumeAdjuster.offset().left) / this.$volumeAdjuster.width());
	this.adjustedVolume = volume * 100;
	this.$volumeBar.width(this.adjustedVolume + '%');
	},
	adjustCurrentTime: function (e) {
	var theRealEvent = isTouch ? e.originalEvent.touches[0] : e;
	var duration = this.$player.getDuration();
	this.adjustedTime = Math.round((duration * (theRealEvent.pageX - this.$bar.offset().left)) / this.$bar.width());
	this.updateTimerDisplay(this.adjustedTime);
	},
	updateTimerDisplay: function (time) {
	// stop if no current time is given and players are null
	if (typeof time === 'undefined' && (this.$player === null \|\|
	typeof this.$player.getPlayerState !== 'function' \|\|
	this.$player.getPlayerState() !== 1)) {
	return;
	}

	var currentTime = typeof time === 'undefined' ? this.$player.getCurrentTime() : time;
	var duration = this.$player.getDuration();

	var currentTimeFormat = this.formatTime(currentTime);
	this.$timeCurrent.text(currentTimeFormat);
	this.$timeDuration.text(this.formatTime(this.$player.getDuration()));
	this.$barPlayed.width((currentTime / duration) * 100 + '%');
	},
	playVideo: function () {
	var plugin = this;
	plugin.$container.addClass(plugin.options.containerPlayingClass);
	plugin.$player.playVideo();
	},
	destroy: function () {
	console.log('destroy');
	this.unbindEvents();
	this.$image.removeData();
	this.$player.destroy();
	this.$player = null;

	this.$container.removeClass('playing');
	},
	unbindEvents: function () {
	this.$image.off('.' + this._name);
	}
	});

	$.fn.youtube = function (options) {
	this.each(function () {
	var e = $(this);
	if (!e.data(pluginName)) {
	e.data(pluginName, new Plugin(this, options));
	}
	});

	return this;
	};

	$.fn.youtube.defaults = {
	youtubePlayerOptions: {
	height: '315',
	width: '560',
	playerVars: {
	rel: 0,
	controls: 0
	}
	},
	classPrefix: 'videoplayer',
	cssClass: {
	iconPlay: 'icon-play',
	iconPause: 'icon-pause'
	},
	containerPlayingClass: 'playing',
	cssClassSub: {
	playPause: 'playpause',
	playing: 'playing',
	time: 'time',
	timeCurrent: 'time-current',
	timeDuration: 'time-duration',
	bar: 'bar',
	barLoaded: 'bar-loaded',
	barPlayed: 'bar-played',
	volume: 'volume',
	volumeButton: 'volume-button',
	volumeAdjust: 'volume-adjust',
	volumeBar: 'volume-bar',
	noVolume: 'novolume',
	mute: 'mute',
	mini: 'mini'
	}

	}
	})(jQuery, window, document);

	function onYouTubeIframeAPIReady() {
	Garnish.$bod.trigger('youtubeReady');
	}


	<div class="content-part video media even">
	<div class="content size videoplayer-container">
	<h2>Test Video</h2>
	<figure class="media-wrap">
	<a href="" title="Video abspeielen" class="video-wrap shadow videoplayer-play-link">
	<span class="icon-play circle"><i class="bg"></i><em>Video abspeielen</em></span>
	<img src="some url"/>
	</a>

	<div class="iframe-wrap" style="display: none">
	<div class="youtube-player" data-youtube-id="WrAV5EVI4tU" id="29421423"></div>
	</div>
	</figure>
	<div class="videoplayer">
	<div class="" title="">
	<a href="#" class="videoplayer-playpause icon-play"></a>
	</div>
	<div class="videoplayer-time videoplayer-time-current">00:00</div>
	<div class="videoplayer-bar">
	<div class="videoplayer-bar-loaded" style="width: 100%;"></div>
	<div class="videoplayer-bar-played"></div>
	</div>
	<div class="videoplayer-time videoplayer-time-duration">00:02</div>
	<div class="videoplayer-volume">
	<div class="videoplayer-volume-button" title="">
	<a href="#" class="icon-audio"></a>
	</div>
	<div class="videoplayer-volume-adjust">
	<div>
	<div class="videoplayer-volume-bar" style="width: 100%;"></div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>