shakedlokits/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fullscreen Video</title>

  <script src="https://cdn.plyr.io/2.0.7/plyr.js" charset="utf-8"></script>
  <link rel="stylesheet" href="https://cdn.plyr.io/2.0.16/plyr.css">

  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
  <button type="button">Full Screen</button><br>
  <div id="player"></div>

  <script src="https://www.youtube.com/iframe_api"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script type="text/javascript">
    var player, iframe;
    var _ = document.querySelector.bind(document);

    // init player
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        height: '200',
        width: '300',
        videoId: 's8MDNFaGfT4',
        events: {
          'onReady': onPlayerReady
        }
      });
    }

    // when ready, wait for clicks
    function onPlayerReady(event) {
      var player = event.target;
      iframe = _('#player');
      setupListener();
    }

    function setupListener() {
      _('button').addEventListener('click', playFullscreen);
    }

    function playFullscreen() {
      // hide button and show video
      $('button').css('display', 'none')
      $('#player').css('opacity', 1)

      player.playVideo(); //won't work on mobile

      var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
      if (requestFullScreen) {
        requestFullScreen.bind(iframe)();
      }
    }
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Fullscreen Video</title>

	<script src="https://cdn.plyr.io/2.0.7/plyr.js" charset="utf-8"></script>
	<link rel="stylesheet" href="https://cdn.plyr.io/2.0.16/plyr.css">

	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
	</head>

	<body>
	<button type="button">Full Screen</button><br>
	<div id="player"></div>

	<script src="https://www.youtube.com/iframe_api"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script type="text/javascript">
	var player, iframe;
	var _ = document.querySelector.bind(document);

	// init player
	function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
	height: '200',
	width: '300',
	videoId: 's8MDNFaGfT4',
	events: {
	'onReady': onPlayerReady
	}
	});
	}

	// when ready, wait for clicks
	function onPlayerReady(event) {
	var player = event.target;
	iframe = _('#player');
	setupListener();
	}

	function setupListener() {
	_('button').addEventListener('click', playFullscreen);
	}

	function playFullscreen() {
	// hide button and show video
	$('button').css('display', 'none')
	$('#player').css('opacity', 1)

	player.playVideo(); //won't work on mobile

	var requestFullScreen = iframe.requestFullScreen \|\| iframe.mozRequestFullScreen \|\| iframe.webkitRequestFullScreen;
	if (requestFullScreen) {
	requestFullScreen.bind(iframe)();
	}
	}
	</script>
	</body>

	</html>