Why Youtube videos in FancyBox are not showing when used on mobile devices? - fancybox

Question

I am using Fancybox to display youtube videos. In PC and MAC everything works good, but not in mobile devices. The code i have is:
<div class="gallery slider">
<div><a class="various fancybox.iframe slick-slide" title="The Falltape" href="http://www.youtube.com/v/ZeStnz5c2GI?fs=1&autoplay=1"><img src="../images/2.jpg"></a></div>
<div><a class="various fancybox.iframe slick-slide" title="The Barn" href="http://www.youtube.com/v/4tS88S6em8Y?fs=1&autoplay=1"><img src="../images/1.jpg"></a></div>
<div><a class="various fancybox.iframe slick-slide" title="The Barn" href="http://www.youtube.com/v/4tS88S6em8Y?fs=1&autoplay=1"><img src="../images/2.jpg"></a></div>
<div><a class="various fancybox.iframe slick-slide" title="The Falltape" href="http://www.youtube.com/v/ZeStnz5c2GI?fs=1&autoplay=1"><img src="../images/2.jpg"></a></div>
<div><a class="various fancybox.iframe slick-slide" title="The Barn" href="http://www.youtube.com/v/4tS88S6em8Y?fs=1&autoplay=1"><img src="../images/1.jpg"></a></div>
<div><a class="various fancybox.iframe slick-slide" title="The Barn" href="http://www.youtube.com/v/4tS88S6em8Y?fs=1&autoplay=1"><img src="../images/2.jpg"></a></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect: 'none',
type: "iframe",
iframe: {
preload: false
}
});
});
What can be going on?
When i use Developer Tools the following error is showing:
Resource interpreted as Document but transferred with MIME type application/x-shockwave-flash.trong text

Answer 1

I finally got it.
The issue here was the URL used to access the Youtube videos. I changed the URLs and now it works:
<div class="gallery slider">
<div><a class="fancybox fancybox.iframe slick-slide" title="The Falltape" href="https://www.youtube.com/embed/9_bFYdMYG-w?enablejsapi=1&wmode=opaque"><img src="../images/2.jpg"></a></div>
<div><a class="fancybox fancybox.iframe slick-slide" title="The Barn" href="https://www.youtube.com/embed/9_bFYdMYG-w?enablejsapi=1&wmode=opaque"><img src="../images/1.jpg"></a></div>
<div><a class="fancybox fancybox.iframe slick-slide" title="The Barn" href="https://www.youtube.com/embed/9_bFYdMYG-w?enablejsapi=1&wmode=opaque"><img src="../images/2.jpg"></a></div>
<div><a class="fancybox fancybox.iframe slick-slide" title="The Falltape" href="https://www.youtube.com/embed/9_bFYdMYG-w?enablejsapi=1&wmode=opaque"><img src="../images/2.jpg"></a></div>
<div><a class="fancybox fancybox.iframe slick-slide" title="The Barn" href="https://www.youtube.com/embed/9_bFYdMYG-w?enablejsapi=1&wmode=opaque"><img src="../images/1.jpg"></a></div>
<div><a class="fancybox fancybox.iframe slick-slide" title="The Barn" href="https://www.youtube.com/embed/9_bFYdMYG-w?enablejsapi=1&wmode=opaque"><img src="../images/2.jpg"></a></div>
</div>
By reading the YouTube API documentation it is clealy defined that the URL to use must be in the following format:
https://www.youtube.com/embed/VIDEO_ID
I was not using that format.