I'm trying to dynamically change an embedded video on a page. It's working in Firefox but for some reason it's not working in IE and Chrome (strange combination). Here's the HTML:
<object id="viewer" width="575" height="344">
<param name="wmode" value="transparent" />
<param name="movie" value="http://www.youtube.com/v/Lmn94kn08Lw&hl=en&fs=1&color1=0x006699&color2=0x54abd6&rel=0" />
<param name="allowFullScreen" value="true" />
<embed id="embeddedPlayer" src="http://www.youtube.com/v/Lmn94kn08Lw&hl=en&fs=1&color1=0x006699&color2=0x54abd6&rel=0" type="application/x-shockwave-flash" allowfullscreen="true" width="575" height="344" wmode="transparent"></embed>
</object>
And here's my javascript code. A link is clicked to change the video:
$("#video a").click(
function() {
var videoAddress = $(this).attr("href");
$("#embeddedPlayer").attr("src", videoAddress);
return false; // stop the default link so it just reloads in the video player
}
);
Like I said the videos are changing perfectly in Firefox but in IE and Chrome nothing happens. Any ideas?
Finally figured out something that works in IE, Firefox, and Chrome.
It seems a little unusual to do it this way but it works in IE8/Firefox/Chrome so it sounds good to me.
$("#video a").click(
function() {
var videoAddress = $(this).attr("href");
$("#media-active").html(" ");
$("#media-active").html('<object id="viewer" width="575" height="344"><param name="wmode" value="transparent" />' +
'<param name="movie" value="' + videoAddress + '" /><param name="allowFullScreen" value="true" />' +
'<embed id="embeddedPlayer" src="' + videoAddress + '" type="application/x-shockwave-flash" allowfullscreen="true" width="575" height="344" wmode="transparent"></embed></object>');
return false; // stop the default link so it just reloads in the video player
}
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With