La API de YouTube no funciona en iOS (iPhone / iPad) pero funciona bien en browseres de escritorio.

Estoy usando la API de YouTube en un simple website de una página. Soy capaz de reproducir videos y toda mi funcionalidad de YouTube funciona con éxito en los browseres de escritorio (con la exception de IE 7; quizás este problema se abordará al ayudarme a responder esta pregunta) pero parece que no funciona en absoluto en iOS (iPhone y iPad). El reproductor de YouTube simplemente no se muestra y no hay reminiscencias de la funcionalidad de YouTube en absoluto en iOS.

A continuación se muestra mi implementación de código. Si hay alguna información de la pregunta que no proporcioné que sería útil para esta pregunta, avíseme. Quiero comenzar lo más simple posible al abordar este problema y luego traer información adicional si es necesario.

/*========================================================================== YOUTUBE ========================================================================== */ 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 YTready = false, playerIdList = [], ytPlayers = {}; // When YouTube API is ready, switch YTready to true and run the queue of videos should any exist // and run a list of page-specified functions such as carousel setups var YTreadyFunctions = {}; function onYouTubeIframeAPIReady() { console.log('YT Ready'); YTready = true; if (playerIdList.length > 0) { runYouTubeIframeList(playerIdList); } for(id in YTreadyFunctions){ var thisFunc = YTreadyFunctions[id]; var thisArgs = thisFunc.args; thisFunc.func(thisArgs.id,thisArgs.counters,thisArgs.isHome,thisArgs.isAutoRot,thisArgs.galleryType); } } function shortID(elemId){ return elemId.split('-').join(''); } function initializeYouTubeIframe(playerId,params){ //var playerId = thisList[x]; var thisPlayer = document.getElementById(playerId); ytPlayers[shortID(playerId)] = new YT.Player(playerId, { width: thisPlayer.getAttribute('width'), height: thisPlayer.getAttribute('height'), playerVars: { autohide: 1, //autoplay: 1, theme: 'light', showinfo: 0, color: 'white', rel: 0, origin: document.location.hostname, wmode: 'transparent' }, videoId: playerId, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } function runYouTubeIframeList(thisList) { // If the YouTube iFrame API (onYouTubeIframeAPIReady is not ready yet, // add the player(s) to a list (playerIdList) to wait until the API is ready and then initialize if (!YTready) { playerIdList.concat(thisList); } else { // YT API is ready. Initialize the list of player iframes. var thisListLength = thisList.length; for (var x = 0; x < thisListLength; x++) { initializeYouTubeIframe(thisList[x]); } } } function onPlayerReady(event) { //alert('player ready'); } function onPlayerStateChange(event) { //alert('state changed: ' + event.data); if (event.data == 3) { $('.loading').remove(); } if (event.data == 1) { $('#i360-static-panel').css('display','none'); $('.loading').remove(); $('div#i360-questions > h2').fadeIn(500).removeClass('transparent'); } if (event.data == 0) { $('#i360-answer-mask').slideUp(function () { $('p.active-answer').remove(); $('div#i360-questions > ul').fadeIn(500).removeClass('transparent'); $('div#i360-questions > ul > li').removeClass('i360-clicked-question'); }); $('.i360-shown').fadeOut(300); $(event.target.a.parentNode).children('#i360-static-panel').css('display','block'); } } // run through all yt-players and add their ID to a list of to-be-initialized players $('.yt-player').each(function(i){ playerIdList.push($(this).attr('id')); }); runYouTubeIframeList(playerIdList); function setVideoCarouselThumb(response,element){ if(response.data){ if(response.data.thumbnail.hqDefault){ element.getElementsByTagName('img')[0].src = response.data.thumbnail.hqDefault; } else if(response.data.thumbnail.sqDefault){ element.getElementsByTagName('img')[0].src = response.data.thumbnail.sqDefault; } } else if (response.status){ if(response.status == '403'){ element.setAttribute('class',element.getAttribute('class') ? element.getAttribute('class') + ' private' : 'private'); } } } function getYouTubeInfoById(type,getID,callback,args){ //window.console && console.log('function: getYouTubeInfoById | type = ',type,' | getId = ',getID,' | args = ',args); //consoleThis('https://gdata.youtube.com/feeds/api/' + type + '/' + getID + '?v=2&prettyprint=true&alt=jsonc'); $.ajax({ url: 'https://gdata.youtube.com/feeds/api/' + type + '/' + getID + '?v=2&prettyprint=true&alt=jsonc', dataType: 'jsonp', context: args ? args : '', success: function(response){ callback(response,this); }, error: function(response){ callback(response,this); //consoleThis(response); } }); } // END YOUTUBE </script> <meta name="apple-mobile-web-app-title" content="Roundup" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="Roundup" /> <meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0"> 

Según esta otra publicación SO , existen limitaciones en iOS, donde "… los medios integrados no se pueden reproducir automáticamente de forma progtwigda en Safari en iOS, el usuario siempre inicia la reproducción".

Tuve el mismo problema y resulta que puedes tener un IFrame de API de YouTube correctamente embedded y mostrado en iOS con el gran button rojo de "Reproducir" de YouTube, es solo que iOS no te permitirá iniciar / detener el video con tus propios controles Y JavaScript Por ejemplo, puede continuar / anterior con JavaScript, pero no puede reproducir / pausar, lo que debe hacerse haciendo clic en el video, luego con los controles nativos al lado de la barra de progreso del video.

Pero con respecto a la última oración de su primer párrafo y dejando de lado estas limitaciones, el reproductor de YouTube debe mostrar, hay algo mal en lo que hizo (aunque no soy lo suficientemente experto para saber qué). También estoy haciendo eso en un website simple de una página , siéntete libre de echar un vistazo a lo que hice.

¡Espero que ayude!