YT embed

by PhilQ

HTML

<div id="screen"></div>
<div id="player_wrapper"><div id="player"></div></div>

CSS

* { margin: 0; padding: 0; }

#screen {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: all;
	z-index: 2;
}

#player_wrapper {
	display: block;
	position: fixed;
	left: 0;
	top: 50%;
	transform: translate(0, -50%);
	width: 100%;
	padding-top: 100%;
	box-sizing: content-box;
	min-height: 100%;
	z-index: 1;
}

#player {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

JavaScript

(function() {
    var ev = new $.Event('style'),
        orig = $.fn.css;
    $.fn.css = function() {
        $(this).trigger(ev);
        return orig.apply(this, arguments);
    }
})();


// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;

function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
		//height: '640',
		//width: '640',
		videoId: 'pG3Z3JykLC0',
		playerVars: {
			'playsinline': 1,
			'color': 'white', // red/white
			'autoplay': 1,
			'controls': 1,
			'rel': 0,
			'modestbranding': 1,
			'showsearch': 0,
		},
		events: {
			'onReady': onPlayerReady,
			'onStateChange': onPlayerStateChange
		}
	});
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
	// console.log( event );
	// console.log( player );
	// console.log( player.getIframe() );
	
	player.pauseVideo();
	setTimeout(function() {
		player.seekTo(3*60 + 5, true);
		player.playVideo();
	}, 500);
	//player.pauseVideo();
	//event.target.playVideo();
}

// 5. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.

function onPlayerStateChange(event) {
	switch ( event.data ) {
		case YT.PlayerState.ENDED:
			player.playVideo();
			player.pauseVideo();
			break;
			
		case YT.PlayerState.PLAYING:
			break;
	}
}

$( document ).ready(function() {
	$('#screen').bind('style', function(e) {
		console.log( $(this).attr('style') );
	});
});