title: YouTube API not working with iPad / iPhone / non-Flash device
body: <p>This piece of code works great in DESKTOP browsers (code courtesy of @Rob-W), click the thumbnail and the adjacent video will start playing, using YouTube's API.</p>
  
  <p>HTML
  </p>
  
  <pre><code>&lt;div id="tabs2"&gt;
      &lt;div&gt;
      &lt;img class='thumb' src='http://i2.cdnds.net/11/34/odd_alan_partridge_bio_cover.jpg'&gt;
      &lt;iframe id="frame1" width="640" height="390" frameborder="0" title="YouTube video player"type="text/html"src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
          &lt;img class='thumb' src='http://i2.cdnds.net/11/34/odd_alan_partridge_bio_cover.jpg'&gt;
     &lt;iframe id="frame2" width="640" height="390" frameborder="0" title="YouTube video player"type="text/html"src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS
  </p>
  
  <pre><code>#tabs2 div {
      position: relative;
  }
  /* For security reasons, an element cannor be placed over a frame */
  /*.thumb {
      position: absolute;
  }*/    
  .play {
      border: 3px solid red;
  }
  </code></pre>
  
  <p>JS
  </p>
  
  <pre><code>function getFrameID(id) {
      var elem = document.getElementById(id);
      if (elem) {
          if (/^iframe$/i.test(elem.tagName)) return id; //Frame, OK
          // else: Look for frame
          var elems = elem.getElementsByTagName("iframe");
          if (!elems.length) return null; //No iframe found, FAILURE
          for (var i = 0; i &lt; elems.length; i++) {
              if (/^https?:\/\/(?:www\.)?youtube(?:-nocookie)?\.com(\/|$)/i.test(elems[i].src)) break;
          }
          elem = elems[i]; //The only, or the best iFrame
          if (elem.id) return elem.id; //Existing ID, return it
          // else: Create a new ID
          do { //Keep postfixing `-frame` until the ID is unique
              id += "-frame";
          } while (document.getElementById(id));
          elem.id = id;
          return id;
      }
      // If no element, return null.
      return null;
  }
  
  // Define YT_ready function.
  var YT_ready = (function() {
      var onReady_funcs = [],
          api_isReady = false;
  /* @param func function     Function to execute on ready
           * @param func Boolean      If true, all qeued functions are executed
           * @param b_before Boolean  If true, the func will added to the first
                                       position in the queue*/
      return function(func, b_before) {
          if (func === true) {
              api_isReady = true;
              for (var i = 0; i &lt; onReady_funcs.length; i++) {
                  // Removes the first func from the array, and execute func
                  onReady_funcs.shift()();
              }
          }
          else if (typeof func == "function") {
              if (api_isReady) func();
              else onReady_funcs[b_before ? "unshift" : "push"](func);
          }
      }
  })();
  // This function will be called when the API is fully loaded
  
  function onYouTubePlayerAPIReady() {
      YT_ready(true)
  }
  
  var players = {};
  //Define a player storage object, to enable later function calls,
  //  without having to create a new class instance again.
  YT_ready(function() {
      $(".thumb + iframe[id]").each(function() {
          var identifier = this.id;
          var frameID = getFrameID(identifier);
          if (frameID) { //If the frame exists
              players[frameID] = new YT.Player(frameID, {
                  events: {
                      "onReady": createYTEvent(frameID, identifier)
                  }
              });
          }
      });
  });
  
  // Returns a function to enable multiple events
  function createYTEvent(frameID, identifier) {
      return function (event) {
          var player = players[frameID]; // player object
          var the_div = $('#'+identifier).parent();
          the_div.children('.thumb').click(function() {
              var $this = $(this);
              $this.fadeOut().next().addClass('play');
              if ($this.next().hasClass('play')) {
                  player.playVideo();
              }
          });
      }
  }
  // Load YouTube Frame API
  (function(){ //Closure, to not leak to the scope
    var s = document.createElement("script");
    s.src = "http://www.youtube.com/player_api"; /* Load Player API*/
    var before = document.getElementsByTagName("script")[0];
    before.parentNode.insertBefore(s, before);
  })();
  </code></pre>
  
  <p><kbd><a href="http://jsfiddle.net/KtbYR/5/" rel="noreferrer">JSFiddle</a></kbd></p>
  
  <p>The problem is that it fails to play on iOS devices (because of the lack of Flash player, I think, it just hangs).</p>
  
  <p>I can force it to play by tapping the video once more, which prompts it to play using QuickTime.</p>
  
  <p>But how do I get it to play with QuickTime automatically?</p>