iframe嵌入式YouTube视频在移动浏览器上显示为黑色

Question

我尝试使用youtube iframe api根据我存储在数据库中的视频ID将视频添加到我的页面上。我使用这种方法是因为我想知道视频何时结束，以便我可以显示一个按钮来提交表单。

我的问题是，在我的iPhone 5和Android平板电脑上，视频显示为黑色。当您点击黑匣子但没有视频播放时，它会显示在顶部的标题。它适用于OSX上的Firefox和Chrome。

我使用的代码如下：

<div id="video-content" class="span6"><!--Youtube video inserted here by javascript --></div>
<script>
        //Start youtube javascript code
        var tag = document.createElement('script');

        tag.src = "//www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('video-content', {
                videoId: '<?php echo $video_ids['video_id']; ?>',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

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

        function onPlayerStateChange(event) {
            if (event.data == 0) {
                $('#test-submit').show();
                console.log('Done');
            }
        }