Youtube iFrame APIを使用して2つの同時動画を強制しますか？

Question

私は本質的に2つのYoutubeビデオを並べて比較する（もちろん、ミュートされる）アプリケーションを作成しています。

私はhtml/javascriptの方が優れているので、Phonegap Buildを使用してこのことをまとめています。 iOS 10.3のおかげで、2つのhtml5ビデオ要素をインラインで再生できるようになりました。これは素晴らしいスタートです（http://codepen.io/hay/pen/xERaVB参照）。

html5ビデオタグをYoutube iframeに置き換え、同時に両方の動画で同じインライン、自動再生動作を維持することが課題です。

私の現在のコード：

//Load the IFrame Player API code asynchronously 
 
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 ytPlayerVars = { 
 
\t \t \t 'autoplay': 1, 
 
\t \t \t 'controls': 0, 
 
\t \t \t 'rel': 0, 
 
\t \t \t 'modestbranding': 1, 
 
\t \t \t 'showinfo': 0, 
 
\t \t \t 'loop': 1 
 
\t \t }; 
 

 
function onYouTubeIframeAPIReady() { 
 
    createIframes('div_one','div_two'); 
 
} 
 

 
function createIframes(divElementOne, divElementTwo){ 
 
    var iframeOne = new YT.Player(divElementOne, { // Replace div_one with an iframe 
 
\t \t height: '200', 
 
\t \t width: '200', 
 
\t \t videoId: 'uENITui5_jU', 
 
\t \t playerVars: ytPlayerVars, 
 
\t \t events: { 
 
\t \t \t 'onReady': onIframeReady 
 
\t \t } 
 
\t }); 
 
    var iframeTwo = new YT.Player(divElementTwo, { // Replace div_two with an iframe 
 
\t \t height: '200', 
 
\t \t width: '200', 
 
\t \t videoId: 'NmS6h_fkPgk', 
 
\t \t playerVars: ytPlayerVars, 
 
\t \t events: { 
 
\t \t \t 'onReady': onIframeReady 
 
\t \t } 
 
\t }); 
 
} 
 

 
function onIframeReady(event){ 
 
    event.target.playVideo(); 
 
}

div{ 
 
    width:200px; 
 
    height:200px; 
 
    float:left; 
 
    margin:0; 
 
}

<div id="div_one" class="embed-responsive-item"></div> 
 
<br /> 
 
<div id="div_two" class="embed-responsive-item"></div>

テスト済み

とChromeとSafariで正常に動作しますが、すぐに私はPhoneGapのでそれを構築し、iOSの上でそれを試して、それには、外出先ません。

任意の助けも大歓迎:)

Answer 1

WARD - >あなたは答えを得たときPLZ、このコメントを回答。

APIを複数回呼び出すことができない場合は、iframeを使用してカスタマイズしてカスタマイズできます。