Fancybox - 嵌入式YouTube（使用YouTube API）无法在iOS上加载

Question

我正在使用Fancybox显示上传到YouTube的视频。我想在视频结束时执行操作（在这种情况下，从视频转到组中的下一个元素 - 图像），因此我还使用YouTube API。

该页面在桌面浏览器上工作得很好（我认为Android，但我还没有广泛测试），但在我的iPhone上无法加载视频。覆盖图即将出现，但似乎尝试自动播放视频，然后变成黑色。

我目前正在使用jQuery 1.8.3（我试着用1.10，但它没有工作，所以我给了降级镜头）和Fancybox 2.1.5。

下面是相关的HTML：

<div class="content" id="main"> 
    <div id="logo"> 
     <a class="fancybox fancybox.iframe" id="logo-link" data-fancybox-group="group01"href="http://www.youtube.com/embed/Bc0qNwaSxlM"></a> 
     <a class="fancybox" id="v-link" data-fancybox-group="group01" data-fancybox-type="image" href="img/superhard_v.png" title="<a href='#' id='return-link'>or return to ihardyou</a>"></a> 
    </div> 
</div> 

的JavaScript：

window.onYouTubePlayerAPIReady = function() { 
    // Initialise the fancyBox after the DOM is loaded 
    $(document).ready(function() { 
     $(".fancybox") 
      .attr('rel', 'gallery') 
      .fancybox({ 
       helpers: { 
        media: {}, 
        overlay : { 
         css : { 
          'background' : 'rgba(0, 0, 0, 0.95)' 
         } 
        } 
       }, 
       youtube : { 
        vq: 'hd1080' 
       }, 
       padding: 0, 
       margin: 30, 
       autoSize: false, 
       arrows: false, 
       'closeBtn' : false, 
       beforeShow : function() { 
        // Find the iframe ID 
        var id = $.fancybox.inner.find('iframe').attr('id'); 

        // Create video player object and add event listeners 
        var player = new YT.Player(id, { 
         events: { 
          'onReady': onPlayerReady, 
          'onStateChange': onPlayerStateChange 
         } 
        }); 

        if (this.index === 1) { 
         $('.fancybox-outer').css("padding-bottom","100px"); 
        } 
       }, 
       afterShow: function() { 
        if (this.index === 1) { 
         $("img.fancybox-image").click(function(event) { 
          event.preventDefault(); 
          newLocation = "vanity/"; 
          $('body').fadeOut(1000, newPage); 
         }); 

         $('#return-link').click(function(event) { 
          event.preventDefault(); 
          $.fancybox.close(); 
         }); 
        }    
       }, 
       tpl: { 
        wrap : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin" style="background-color:transparent;"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>' 
       }, 
       iframe: { 
        preload: false 
       } 
      }); 

    }); 
} 

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

// Fires when the player's state changes. 
function onPlayerStateChange(event) { 
    // Go to the image after the current one is finished playing 
    if (event.data === 0) { 
     setTimeout(function(){$.fancybox.next()},1250); 
    } 
} 

我把autoSize和preload: false为iframe因为我是从其他人的问题，遇到了解决方案，但他们没有工作。我特别希望后者可以工作，因为this question and the example JSFiddle，但它不起作用，这使我相信这可能是API的问题？我也查看了使用该API的Fancybox主页上的example，但它也不适用于我的iPhone，这进一步证实了我的怀疑。

如果任何人有解决方法或任何想法如何解决这个问题，将不胜感激。谢谢！

Answer 1

为什么不重新检查中的fancybox网站使用的各种例子：

你可以试试这个： * 的Html *

<li> 
     <a class="various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a> 
    </li> 

的Javascript：

$(document).ready(function() { 
    $(".various").fancybox({ 
     maxWidth : 800, 
     maxHeight : 600, 
     fitToView : false, 
     width  : '70%', 
     height  : '70%', 
     autoSize : false, 
     closeClick : false, 
     openEffect : 'none', 
     closeEffect : 'none' 
    }); 
}); 

我们检查他们的官方小提琴youtube iframe：This is their fiddle

HTML：

<!-- This loads the YouTube IFrame Player API code --> 
<script src="http://www.youtube.com/player_api"></script> 

<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?enablejsapi=1&wmode=opaque">Video #1</a> 

<br /> 

<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/cYplvwBvGA4?enablejsapi=1&wmode=opaque">Video #2</a> 

您可以检查出remainin'