adamsheridan/player.html

## player.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>YouTube iFrame API Player</title>

        <script>
            var player;

            function onYouTubeIframeAPIReady() {
                console.log('iFrame Ready');

                player = new YT.Player('player', { // player param is dom element id
                    height: '400',
                    width: '400',
                    videoId: 'ylP4DDwXZb8',
                    playerVars: {
                        controls: 0,
                        rel: 0,
                        showinfo: 0,
                        modestbranding: true, // modestbranding conflicts with showinfo
                        autoplay: 0
                    },
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                });
            }

            function onPlayerReady(e) {
                console.log('ready');

                // will autoplay
                e.target.playVideo();
            }

            function onPlayerStateChange(e) {
                console.log('on state change');
            }

            function controlPlay() {
                player.playVideo();
            }

            function controlPause() {
                player.pauseVideo();
            }

            function controlMute() {
                player.mute();
            }

            function controlUnmute() {
                player.unMute();
            }
        </script>
    </head>
    <body>

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

        <nav>
            <a href="#" class="control play">Play</a><br />
            <a href="#" class="control pause">Pause</a><br />
            <a href="#" class="control mute">Mute</a><br />
            <a href="#" class="control unmute">Unmute</a>
        </nav>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

        <!-- can load this via ajax if you prefer -->
        <script src="https://www.youtube.com/iframe_api"></script>

        <script>
            $('.control').on('click', function(e){
                e.preventDefault();
            });

            $('.control.play').on('click', function() {
                controlPlay();
            });

            $('.control.pause').on('click', function() {
                controlPause();
            });

            $('.control.mute').on('click', function() {
                controlMute();
            });

            $('.control.unmute').on('click', function() {
                controlUnmute();
            });
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>YouTube iFrame API Player</title>

	<script>
	var player;

	function onYouTubeIframeAPIReady() {
	console.log('iFrame Ready');

	player = new YT.Player('player', { // player param is dom element id
	height: '400',
	width: '400',
	videoId: 'ylP4DDwXZb8',
	playerVars: {
	controls: 0,
	rel: 0,
	showinfo: 0,
	modestbranding: true, // modestbranding conflicts with showinfo
	autoplay: 0
	},
	events: {
	'onReady': onPlayerReady,
	'onStateChange': onPlayerStateChange
	}
	});
	}

	function onPlayerReady(e) {
	console.log('ready');

	// will autoplay
	e.target.playVideo();
	}

	function onPlayerStateChange(e) {
	console.log('on state change');
	}

	function controlPlay() {
	player.playVideo();
	}

	function controlPause() {
	player.pauseVideo();
	}

	function controlMute() {
	player.mute();
	}

	function controlUnmute() {
	player.unMute();
	}
	</script>
	</head>
	<body>

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

	<nav>
	<a href="#" class="control play">Play</a><br />
	<a href="#" class="control pause">Pause</a><br />
	<a href="#" class="control mute">Mute</a><br />
	<a href="#" class="control unmute">Unmute</a>
	</nav>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script>window.jQuery \|\| document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

	<!-- can load this via ajax if you prefer -->
	<script src="https://www.youtube.com/iframe_api"></script>

	<script>
	$('.control').on('click', function(e){
	e.preventDefault();
	});

	$('.control.play').on('click', function() {
	controlPlay();
	});

	$('.control.pause').on('click', function() {
	controlPause();
	});

	$('.control.mute').on('click', function() {
	controlMute();
	});

	$('.control.unmute').on('click', function() {
	controlUnmute();
	});
	</script>
	</body>
	</html>