JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-media.js"></script>
<a class="fancybox" href="http://youtu.be/PDxbb6uab5Q" data-fancybox-rel="1">video</a>
<br> <a class="fancybox" href="http://youtu.be/jqpSwJw7SEo" data-fancybox-rel="0">video</a>
JavaScript
var dataRel;
$('.fancybox').fancybox({
afterLoad: function () {
dataRel = $(this.element).data("fancybox-rel");
// this.href = this.href + "&rel=" + dataRel
},
helpers: {
media: {
youtube: {
params: {
autoplay: 1,
rel: function () {
// $(this).data("fancybox-rel")
console.log($(this.element));
return 1;
}
}
}
}
},
openEffect: 'elastic',
closeEffect: 'elastic',
});