Using fancybox2 and try to open YouTube video when click on div

<div class="vid" data-href="">This DIV should open fancybox</div>    

$(".vid").fancybox({
type: "iframe",
onStart: function (el, index) {
    var thisElement = $(el[index]);
    $.extend(this, {
        href: thisElement.data("href")
    });
  }
});

But its dosent work, please help.

jsfiddle

Using fancybox2 and try to open YouTube video when click on div

<div class="vid" data-href="http://www.youtube./embed/gGFXXWsCiVo?autoplay=1">This DIV should open fancybox</div>    

$(".vid").fancybox({
type: "iframe",
onStart: function (el, index) {
    var thisElement = $(el[index]);
    $.extend(this, {
        href: thisElement.data("href")
    });
  }
});

But its dosent work, please help.

jsfiddle

• javascript
• jquery
• onclick
• fancybox-2

• you may want to make things simpler stackoverflow./a/31226347/1055987 – JFK Commented Jul 5, 2015 at 1:03

2 Answers 2

Well, I don't know why you are plicating this fancybox thing like this, Why do you need your 'thisElement' var? You should give us some more details to be sure we really understand what you need... I give you here some tips to open fancybox.. :

when you use fancybox, just start it like this :

//event function(){
$('.vid').click(function(){
    $.fancybox({
        //settings
        'type' : 'iframe',
        'width'     : 640,
        'height'        : 480,
        //You don't need your thisElement var, see below : 
        'href'          : $(this).data('href')
    });
});

and put your settings into it,

here is a starting point for you, now just customize it to make it better for your needs :

http://jsfiddle/rtp7dntc/9/

Hope it helps!

To make things much simpler you could use the special data-fancybox attributes on your div like

<div class="vid" data-fancybox-href="http://www.youtube./embed/gGFXXWsCiVo?autoplay=1" data-fancybox-type="iframe">This DIV should open fancybox</div>

Then use a script as simple as this

jQuery(document).ready(function ($) {
    $('.vid').fancybox();
}); // ready

See JSFIDDLE

NOTE:

The disadvantage of triggering fancybox programmatically as in the accepted answer is that it will only trigger a single fancybox but won't work for a gallery, while you can bind a fancybox gallery of several divs using the data-fancybox-group attribute.