YouTube APIはiOS（iPhone/iPad）では動作しませんが、デスクトップブラウザで正常に動作していますか？

Question

私はシンプルな1ページのウェブサイトでYouTube APIを使用しています。私はビデオを再生することができます。私のYouTubeの機能はすべてデスクトップブラウザで正常に動作します（IE 7を除いて - おそらくこの問題はこの質問に答える手助けになります）が、動作しないようですiOS（iPhoneとiPad）では、YouTubeのプレイヤーは表示されず、YouTubeの機能はまったく思い出されません。

以下は私のコードの実装です。この質問に役に立たない質問情報があれば教えてください。できるだけ簡単にこの問題に対処し、必要に応じて追加情報を取り込みたいと思います。

/*========================================================================== 
    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"> 

Answer 1

はthis other SO postによると、制限がiOSの、上に存在する「...埋め込まれたメディアはiOS版のSafariで、プログラム的に自動的を再生することはできません - 。ユーザーが常に再生を開始します」

私は同じ問題を抱えていたし、それはiOSのは、あなたが開始させないということだけだ、あなたはは、YouTubeのAPIはiframeを適切に組み込まれ、YouTubeの大きな赤い「再生」ボタンでiOSの上で示すことができ判明/自分のコントロールでビデオを停止する& JavaScript。例えば。 JavaScriptを使用して次/前にすることはできますが、ビデオをでをクリックしてからビデオプログレスバーの横にあるネイティブコントロールをクリックして再生/一時停止することはできません。

あなたの最初の段落の最後の文について、これらの制限を除外して、YouTubeプレーヤーはと表示する必要があります（何かを伝えるのに十分な専門家ではありませんが）。私はa simple one-page websiteでそれをやっています、私が何をしたか見て自由に感じる。

希望に役立ちます！