How open youtube video manually with fancybox

Question

I am building an angularJS webapp and I want to open a youtube video by calling a method of my constructor. To achieve that; I want to reproduce the same behavior as

   $(document).ready(function() {
        $('.fancybox-media')
            .attr('rel', 'media-gallery')
            .fancybox({
                openEffect : 'fade',
                closeEffect : 'fade',
                padding: 0,
                helpers : {
                    media : {},
                    buttons : {}
                }
            });
    });

But using the manual way, $.fancybox.open([ ... ]). Can someone guide me on how to do it?

Maybe this post helps you http://stackoverflow.com/questions/13948019/can-you-explain-fancybox-open-group-options-params-and-if-i-can-add-yo — Sergey, Dec 02 '14 at 08:20

score 1 · Accepted Answer · answered Dec 02 '14 at 08:17

1

$.fancybox.open({
    content: '<iframe width="xxx" height="xxx" src="//www.youtube.com/embed/xxxxxxxx" frameborder="0" allowfullscreen></iframe>'
});

answered Dec 02 '14 at 08:17

Sir_Faenor

878
6
13

score 1 · Answer 2 · answered Dec 02 '14 at 15:38

You don't need to set the full iframe HTML tag as content in the fancybox API options but passing the video's URL and set the type to iframe. You could simply do :

jQuery(document).ready(function ($) {
    $.fancybox.open({
        href: "https://www.youtube.com/embed/jid2A7ldc_8",
        type: "iframe",
        // other API options
        openEffect: 'fade',
        closeEffect: 'fade',
        padding: 0,
        helpers: {
            buttons: {}
        }
    });
}); // ready

See JSFIDDLE

How open youtube video manually with fancybox

2 Answers2