fancybox won't play youtube videos
342 views
Skip to first unread message
jill...@gmail.com
Jun 2, 2009, 6:14:22 PM6/2/09
to fancybox
Hi,
I am trying to create a button that opens up a fancybox that will play
a youtube video.
Here is my script below:
<script type="text/javascript">
$(document).ready(function() {
$("a.group").fancybox();
});
</script>
<style>
html, body {
font: normal 11px Tahoma;
color: #333;
}
a {
outline: none;
}
div#wrap {
width: 500px;
margin: 50px auto;
}
img {
border: 1px solid #CCC;
padding: 2px;
margin: 10px 5px 10px 0;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Video Buttons</h1>
<table width="300" border="0" cellspacing="1" cellpadding="1">
<tr>
<td><a rel="group" class="group" href="#testube1"><img
src="img1.jpg" /></a></td>
</tr>
</table>
<div style="display:none" id="testube1">
<object width="480" height="295"><param name="movie" value="http://
www.youtube.com/v/vO5ZlhNGxzU&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999"></param><param
name="wmode" value="transparent"></param><embed src="http://
www.youtube.com/v/vO5ZlhNGxzU&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" wmode="transparent" width="425" height="355"></
embed></object>
</div>
can anyone tell me what I'm doing wrong?
Thanks.
I am trying to create a button that opens up a fancybox that will play
a youtube video.
Here is my script below:
<script type="text/javascript">
$(document).ready(function() {
$("a.group").fancybox();
});
</script>
<style>
html, body {
font: normal 11px Tahoma;
color: #333;
}
a {
outline: none;
}
div#wrap {
width: 500px;
margin: 50px auto;
}
img {
border: 1px solid #CCC;
padding: 2px;
margin: 10px 5px 10px 0;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Video Buttons</h1>
<table width="300" border="0" cellspacing="1" cellpadding="1">
<tr>
<td><a rel="group" class="group" href="#testube1"><img
src="img1.jpg" /></a></td>
</tr>
</table>
<div style="display:none" id="testube1">
<object width="480" height="295"><param name="movie" value="http://
www.youtube.com/v/vO5ZlhNGxzU&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999"></param><param
name="wmode" value="transparent"></param><embed src="http://
www.youtube.com/v/vO5ZlhNGxzU&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" wmode="transparent" width="425" height="355"></
embed></object>
</div>
can anyone tell me what I'm doing wrong?
Thanks.
cholmep
Jun 3, 2009, 12:05:45 AM6/3/09
to fancybox
Hi Jill,
I have had a quick look at your code as I am playing around with
something similar at the moment;
1) Grab the embed code from the YouTube page you want to play, it
should look like this.
<div style="display:none" id="testube1">
<object width="480" height="295">
<param name="movie" value="http://www.youtube.com/v/
vO5ZlhNGxzU&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/vO5ZlhNGxzU&hl=en&fs=1"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="425" height="355">/embed>
</object>
</div>
2) Just change your call to this until you get it to work
$(document).ready(function() {
$("a").fancybox();
});
Hope it works for you.
Chris
> <object width="480" height="295"><param name="movie" value="http://www.youtube.com/v/vO5ZlhNGxzU&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2..."></param><param
> name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/vO5ZlhNGxzU&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2..."
I have had a quick look at your code as I am playing around with
something similar at the moment;
1) Grab the embed code from the YouTube page you want to play, it
should look like this.
<div style="display:none" id="testube1">
<object width="480" height="295">
<param name="movie" value="http://www.youtube.com/v/
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/vO5ZlhNGxzU&hl=en&fs=1"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="425" height="355">/embed>
</object>
</div>
2) Just change your call to this until you get it to work
$(document).ready(function() {
$("a").fancybox();
});
Hope it works for you.
Chris
> name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/vO5ZlhNGxzU&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2..."
JFK
Jun 4, 2009, 5:10:38 AM6/4/09
to fancybox
yes, fancybox will play youtube videos but take note of the following:
1. if your video is not in autostart mode and then you press click to
run the video, it will disappear; you need to set hideOnContentClick
to false
2. you can't group videos (at least I am not aware of any workaround);
grouping normally would be for image galleries so you don't net to set
any 'rel' attribute here
3. please DON'T use $("a").fancybox();
it will open (or will try to) ALL the links you may have in your page,
unless you mean to do that; it's better to associate fancybox to an ID
or class
4. there is a known issue with videos and IE and the workaround is
adding $("#fancy_content").empty();
5. it is always recommended to set the size of you fancybox according
to the size of your video, otherwise it will scale to the default size
(you may get not the resolution expected)
I don't see any problem with your code but the tweaks mentioned above
so try this:
<script type="text/javascript">
$(document).ready(function() {
//Activate FancyBox
$("a.group").fancybox({
// avoid closing fancybox with clickable content
'hideOnContentClick': false,
// set the fancybox size
'frameWidth':480,
'frameHeight':295,
// avoid video keep playing after
// fancybox is closed in IE
'callbackOnClose': function() {
$("#fancy_content").empty();}
});
});
</script>
your html:
<a class="group" href="#testube1"><img src="img1.jpg" /></a>
this should do the job
> <object width="480" height="295"><param name="movie" value="http://www.youtube.com/v/vO5ZlhNGxzU&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2..."></param><param
> name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/vO5ZlhNGxzU&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2..."
1. if your video is not in autostart mode and then you press click to
run the video, it will disappear; you need to set hideOnContentClick
to false
2. you can't group videos (at least I am not aware of any workaround);
grouping normally would be for image galleries so you don't net to set
any 'rel' attribute here
3. please DON'T use $("a").fancybox();
it will open (or will try to) ALL the links you may have in your page,
unless you mean to do that; it's better to associate fancybox to an ID
or class
4. there is a known issue with videos and IE and the workaround is
adding $("#fancy_content").empty();
5. it is always recommended to set the size of you fancybox according
to the size of your video, otherwise it will scale to the default size
(you may get not the resolution expected)
I don't see any problem with your code but the tweaks mentioned above
so try this:
<script type="text/javascript">
$(document).ready(function() {
//Activate FancyBox
$("a.group").fancybox({
// avoid closing fancybox with clickable content
'hideOnContentClick': false,
// set the fancybox size
'frameWidth':480,
'frameHeight':295,
// avoid video keep playing after
// fancybox is closed in IE
'callbackOnClose': function() {
$("#fancy_content").empty();}
});
});
</script>
your html:
<a class="group" href="#testube1"><img src="img1.jpg" /></a>
this should do the job
> name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/vO5ZlhNGxzU&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2..."
jill...@gmail.com
Jun 4, 2009, 12:07:45 PM6/4/09
to fancybox
JFK - you're a hero! it plays perfectly in all browsers!
Thanks so much to everyone!
--cheers.
Thanks so much to everyone!
--cheers.
Reply all
Reply to author
Forward
0 new messages