Open Youtube in wp-Fancybox WordPress
I am trying to open a Youtube video in a Fancybox from a image URL.
I am using wp-fancybox by José Pardilla, on the default settings.
My Javascript
jQuery(document).ready(function() {
$(".video").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 640,
'height' : 385,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
});
My Code
<a class="video" href="<?php echo $youtube; ?>?fs=1&autoplay=1" ><img src="<?php bloginfo('template_url'); ?>/images/youtube01.jpg"/></a>
It just seems to keep opening in a new window.
Can somebody please provide the proper coding required.
Answers (5)
Daniele Raimondi answers:
Why do you hook the click event? Just try something like this:
jQuery(document).ready(function() {
$(".video").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 640,
'height' : 385,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
});
parksey18 comments:
Here's the URL
http://37southdesign.com.au/gwd/business/gnp/
Sébastien | French WordpressDesigner answers:
and what's the resultat ? You have an url ?
parksey18 comments:
Here's the URL
http://37southdesign.com.au/gwd/business/gnp/
Christianto answers:
Hi, Is there any error appear in your browser console, I think it only jquery conflict issue..
pass $ to the ready method
jQuery(document).ready(function($) {
$(".video").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 640,
'height' : 385,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
});
parksey18 comments:
Here's the URL
http://37southdesign.com.au/gwd/business/gnp/
Christianto comments:
There are error that might prevent the script to initialize, in part where you initialize jquery cycle. Delete the timeout if not in use
$('#slideshow').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
pager: '#pager', // selector for element to use as pager container
pause: 0, // true to enable "pause on hover"
pauseOnPagerHover: 0 // true to pause when hovering over pager link
});
try to add prevent default method on the script..
jQuery(document).ready(function($) {
$(".video").click(function(e) {
e.preventDefault();
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 640,
'height' : 385,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
});
parksey18 comments:
Still no success.
Christianto comments:
Upgrade your fancybox to latest version, I think the $.fancybox method only available on latest version :D
parksey18 comments:
Yeah it is the latest version, Im using wp-fancybox
Christianto comments:
No, I'm not talking about the wordpress plugin but the jquery plugin fancybox.
I check the source code jquery.fancybox-1.2.6.js, there are no $.fancybox method define while in the latest version jquery.fancybox-1.3.4.js its define on line 827
I tried it on my firebug console it only work if you use jquery.fancybox-1.3.4.js
CSS and image still need adjustment.
But since you're using wp plugin to include the script, change it or overwrite the function could affect on the plugin functionality.
you might want to use separate jquery plugin to show the video like prettyPhoto.
