title: youtube play video on click doesnt work on ios devices
body: <p>apple blocks auto play of videos. And I get it. But really isn't there something I can do to my code to make it play on of an outside div? I am having a hard time accepting the defeat on this one. Don't like the idea "It cant be done". My users are making a conscious choice when they are clicking that play button any way. So its not really a random auto play on page load. Here is my code. Works like charm on a desktop browser. But really would like to make it work on an ios device</p>
  
  <pre><code>callMain ();
  
  function playerApp(inputVid) {
      var player = new YT.Player('player', {
        videoId: inputVid,
        width:'100%',
        height:'90%',
        playerVars: {
          rel: 0,
          controls : 2,
          enablejsapi : 1,
          origin : document.domain,
          wmode : "transparent"
        },
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
  }
  
  function onPlayerReady(e) {
      e.target.playVideo();
  }
  
  function onPlayerStateChange(e) {
      //this removes the player once the video is done
      if(e.data == 0){
          backgroundOverlay(false);
          $('.videoplayer-wrapper').remove();
      }
  }
  
  function backgroundOverlay(state){
  
      var pageHeight = $( document ).height();
      var overlay = '';
      var wrapperHTML = ''
          + '&lt;div class="videoplayer-wrapper"&gt;'
              + '&lt;div id="player" class="video-player"&gt;&lt;/div&gt;'
              + '&lt;div class="videoplayer-close videoplayer-toggle"&gt;Close&lt;/div&gt;'
          + '&lt;/div&gt;';
  
      if(state){
          overlay = $('body').append('&lt;div class="video-overlay-background" style="height:'+pageHeight+'px;"&gt;&lt;/div&gt;').append(wrapperHTML);
      }else{
          overlay = $('.video-overlay-background').remove();
      }
  
      return overlay;
  }
  
  
  function callMain () //$(function(){
      {
      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 inputVid = '';
      $('.videoplayer-toggle').on('click', function(){
          inputVid = $(this).attr('data-youtubeid');
          backgroundOverlay(true);
          playerApp(inputVid)
  
          $('.videoplayer-close').on('click', function(){
              backgroundOverlay(false);
              $('.videoplayer-wrapper').remove()
          })
  
      });
  }
  </code></pre>
  
  <p>Here is my jsfiddle </p>
  
  <p><a href="http://jsfiddle.net/sghoush1/zmqj6h1b/" rel="nofollow">http://jsfiddle.net/sghoush1/zmqj6h1b/</a></p>