I am using fancyBox for accessing a YouTube URL from a database. I can get the popup to work, and the fade overlay - but I see no video start to play? If I open the link in a new tab or window it plays? Here is my code:
<a class="fancybox various fancybox.iframe" href="GENERATED YOUTUBE LINK"><img class="recipe_pic " src="_resources/images/SRC FOR IMAGE"></a>
Script:
<script> jQuery(document).ready(function() { jQuery(".fancybox").fancybox(); });
jQuery(document).ready(function() { jQuery(".various").fancybox({ maxWidth : 800,
maxHeight : 600, fitToView : false, width : '70%', height : '70%', autoSize : false,
closeClick : false, openEffect : 'none', closeEffect : 'none' }); }); </script>
I cleaned up your code a bit and got it running on JSFiddle. Make sure the YouTube URL that's generated uses the /embed
URL and not /watch
I am not sure it is working as it should, please confirm or deny.
HTML:
<a class="fancybox various fancybox.iframe" href="http://www.youtube.com/embed/9bZkp7q19f0?autoplay=true"><img class="recipe_pic " src="http://www.shoemycolor.com/media/wysiwyg/365984-gangnam-style.jpg"></a>
JS:
jQuery(document).ready(function() {
jQuery(".fancybox").fancybox();
});
jQuery(document).ready(function() {
jQuery(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});