<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>39748863</title>
<style>
</style>
</head>
<body>
<header>
<hgroup>
<h1>ytPlayer</h1>
<h2>SO39748863</h2>
</hgroup>
</header>
<main id='main'>
<iframe id="ytPlayer" width="720" height="405" src="https://www.youtube.com/embed/frdj1zb9sMY?controls=1" frameborder="0" allowfullscreen>
</iframe>
</main>
<footer>
<button id='on'>on</button><button id='off'>off</button>
</footer>
<script>
var tag = document.createElement('script');
tag.id = 'yt';
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytPlayer', {
});
}
var on = document.getElementById("on");
on.addEventListener('click', function(e){
var ytp = document.getElementById("ytPlayer");
ytp.src = "https://www.youtube.com/embed/frdj1zb9sMY?controls=1";
}, false);
var off = document.getElementById("off");
off.addEventListener('click', function(e){
var ytp = document.getElementById("ytPlayer");
ytp.src = "https://www.youtube.com/embed/frdj1zb9sMY?controls=0";
}, false);
</script>
</body>
</html>
// Code goes here
/* Styles go here */