javascript - Google Chrome モバイル ブラウザでの Youtube iframe api

Question

こんにちは、iframe API を使用して yt ムービー プレーヤーを作成しました。モバイル用の Google chrome で問題が発生しました。映画を開始するには、playVideo() 関数を使用しました。映画がロードされているのがわかりますが、その後、音のない黒い yt プレーヤーしか表示されません。私は自分の PC コンピューター、モバイル用の Google Chrome、同僚の iPhone 4s、さらにはネイティブ ブラウザーを搭載した HTC Wildfire S でもテストしました。すべてが大丈夫でした。

例

ムービーを作成するには:

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 player1, player2, player3;
function onYouTubeIframeAPIReady() {
    player1 = new YT.Player('ytapiplayer1', {
        height: '390',
        width: '640',
        videoId: 'Vhik235dWLk',
    });
    player2 = new YT.Player('ytapiplayer2', {
        height: '390',
        width: '640',
        videoId: 'p_Y5WjjVb9I',
    });
    player3 = new YT.Player('ytapiplayer3', {
        height: '390',
        width: '640',
        videoId: '6HOo7_NNHu4',
    });
}

HTML:

<div id="owl-example" class="owl-carousel">
    <div class="video-container" style="background-image: url(http://img.youtube.com/vi/Vhik235dWLk/0.jpg)">
        <div id="ytapiplayer1"></div>
    </div>
    <div class="video-container" style="background-image: url(http://img.youtube.com/vi/p_Y5WjjVb9I/0.jpg)">
        <div id="ytapiplayer2"></div>
    </div>
    <div class="video-container" style="background-image: url(http://img.youtube.com/vi/6HOo7_NNHu4/0.jpg)">
        <div id="ytapiplayer3"></div>
    </div>
</div>

CSS:

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px; height: 0; overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

フクロウのカルーセルを開始して再生し、ムービーを停止する JS

$(document).ready(function() {
$("#owl-example").owlCarousel({
    singleItem : true,
    afterMove: function(){
        $('.video-container').css('background-position', 'center')
        $('iframe').hide();
        player1.stopVideo();
        player2.stopVideo();
        player3.stopVideo();
    }
});

$('body').on('click', '.video-container', function(){
    var owl = $(".owl-carousel").data('owlCarousel');
    console.log(owl.currentSlide)
    if (owl.currentSlide == 0){
        player1.playVideo()
    }
    if (owl.currentSlide == 1){
        player2.playVideo()
    }
    if (owl.currentSlide == 2){
        player3.playVideo()
    }

    $(this).css('background-position', '-1000px -1000px');
    $(this).find('iframe').show()
});
});