Search code examples
jqueryfancybox

jQuery FancyBox not loading YouTube URL


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>

Solution

  • 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' 
        }); 
    });
    

    JSFiddle