Fancybox不适用于移动设备，但适用于桌面

Question

我正在尝试让我的Fancybox在移动设备上运行，但目前它已打开但不播放YouTube视频。

在桌面上，一切正常，但不确定为什么会在移动设备上发生这种情况。

它目前托管在my other website - YouTube视频部分进行测试。

HTML：

<div>
   <a class="youtubeFancy" data-fancybox-type="iframe" href="https://www.youtube.com/watch?v=eyG2i_kPZJA">
   <img src="img/youtube/chewingGum.jpg"/>
   <img id="icon" src="img/youtubePlayIcon.png"/>
   </a>
</div>
<div>
   <a class="youtubeFancy" data-fancybox-type="iframe" href="https://www.youtube.com/watch?v=ga912aEWEyQ">
   <img src="img/youtube/DeckOfCardsVanish.jpg"/>
   <img id="icon" src="img/youtubePlayIcon.png"/>
   </a>
</div>
<div>
   <a class="youtubeFancy" data-fancybox-type="iframe" href="https://www.youtube.com/watch?v=7SquDtdHqfc">
   <img src="img/youtube/Warning.jpg"/>
   <img id="icon" src="img/youtubePlayIcon.png"/>
   </a>
</div>
<div>
   <a class="youtubeFancy" data-fancybox-type="iframe" href="https://www.youtube.com/watch?v=_sSoYADPYlY">
   <img src="img/youtube/fizz.jpg"/>
   <img id="icon" src="img/youtubePlayIcon.png"/>
   </a>
</div>

的fancybox：

$(document).ready(function() {
    $(".youtubeFancy").click(function() {
        $.fancybox({
            'padding': 0,
            'autoScale': true,
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + '&autoplay=1',
            'width': '100%',
            'type': 'iframe',
            iframe: {
                'preload': false
            },
            helpers: {
                media: {}
            }
        });
        return false;
    });
});