La API de YouTube no funciona con iPad / iPhone / dispositivo no Flash

Esta pieza de código funciona muy bien en los browseres DESKTOP (código cortesía de @ Rob-W), click la miniatura y el video adyacente comenzará a reproducirse, utilizando la API de YouTube.

HTML

<div id="tabs2"> <div> <img class='thumb' src='http://img.javascriptes.com/javascript/odd_alan_partridge_bio_cover.jpg'> <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"></iframe> </div> <div> <img class='thumb' src='http://img.javascriptes.com/javascript/odd_alan_partridge_bio_cover.jpg'> <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"></iframe> </div> </div> 

CSS

 #tabs2 div { position: relative; } /* For security reasons, an element cannor be placed over a frame */ /*.thumb { position: absolute; }*/ .play { border: 3px solid networking; } 

JS

 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 < 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 < 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); })(); 

JSFiddle

El problema es que no funciona en dispositivos iOS (debido a la falta de Flash Player, creo que simplemente se bloquea).

Puedo forzarlo a jugar tocando el video una vez más, lo que lo impulsa a jugar usando QuickTime.

Pero, ¿cómo consigo que juegue con QuickTime automáticamente?

Lamento decir que esto no es posible en iOS. De acuerdo con la documentation de Apple ,

"… los medios integrados no se pueden reproducir automáticamente en Safari en iOS; el usuario siempre inicia la reproducción".

La restricción es constante independientemente de la connection de networking, ya que es una decisión de ancho de banda y una decisión de experiencia del usuario.

Actualización, octubre de 2016 : Vale la pena señalar que ahora que iOS 10 ya no está y está ganando una cuota de mercado significativa, las personas pueden aprovechar los cambios en la forma en que funciona la reproducción de video en iOS 10 para get un comportamiento de reproducción automática. Si el video no tiene pistas de audio o la label está silenciada, la reproducción automática puede ser posible. Más información está disponible en este blog de webkit . La API de YouTube puede manejar esto muy pronto.

A partir de iOS 4, UIWebView tiene la propiedad mediaPlaybackRequiresUserAction . No puedo decir si está implementando esto en la Web o en una aplicación nativa, pero configurar eso en una aplicación nativa debería permitir que la reproducción automática funcione.

Puede usar la API iFrame de YouTube en iOS.