luke/youtube_play_mobile_embed.html

## youtube_play_mobile_embed.html
<!DOCTYPE html>
<html>
  <body>
    <div id="player"></div>

    <script>

      // code taken from yt iframe api example
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;
      var config = {
        width: '100%',
        height: '500px',
        playerVars: {
          autohide: 1,
          autoplay: 1,
          controls: 0,
          playsinline: 1, // << for mobile inline playback
          showinfo: 0,
          iv_load_policy: 3,
          rel: 0
        },
        videoId: 'M7lc1UVf-VE',
        events: {
          'onReady': onPlayerReady
        }
      }

      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', config);
      }

      function onPlayerReady(event) {
        // once player is ready we call play
        event.target.playVideo();
        setTimeout(function(){
          // sometimes it doesnt happen, so we call it again
          // if its already playing its a noop
          event.target.playVideo();
        }, 300)
      }


    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<body>
	<div id="player"></div>

	<script>

	// code taken from yt iframe api example
	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	var player;
	var config = {
	width: '100%',
	height: '500px',
	playerVars: {
	autohide: 1,
	autoplay: 1,
	controls: 0,
	playsinline: 1, // << for mobile inline playback
	showinfo: 0,
	iv_load_policy: 3,
	rel: 0
	},
	videoId: 'M7lc1UVf-VE',
	events: {
	'onReady': onPlayerReady
	}
	}

	function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', config);
	}

	function onPlayerReady(event) {
	// once player is ready we call play
	event.target.playVideo();
	setTimeout(function(){
	// sometimes it doesnt happen, so we call it again
	// if its already playing its a noop
	event.target.playVideo();
	}, 300)
	}


	</script>
	</body>
	</html>