changing embed src attribute via javascript (jquery) works in firefox, not safari

Hey all,

1) When clicking on a list in an accordion, it should change the quicktime movie playing in a main window area. It works in firefox but not in safari. The variable imgTitle holds the expected output (e.g. '../images/Intro-1.mov'). It changes the src attribute of the embed tag. This change works in Firefox where the new movie plays on click. However, when clicking the list item in safari, nothing happens.

2) There is a problem in firefox as well in that the movie overlays everything else on page, even though it should be behind the text. Positioning would be tedious given that there's many nested elements and I would have to set relative positioning to the entire page. Any reason for this behavior of embed tags?


$(".image_thumb ul li ul li").click(function(){

var imgTitle = $(this).find('a').attr("href");
var imgDesc = $(this).find('.block').html();
var imgDescHeight = $(".main_image").find('.block').height();

if ($(this).is(".active")) {
return false;
} else {
console.log(imgTitle);
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
$(".main_image embed").attr({ src: imgTitle});
});
}

$(".image_thumb ul li ul li").removeClass('active');
$(this).addClass('active');
return false;

}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});



Thanks for response.

I tried cloning:

$(".image_thumb ul li ul li").click(function(){
var imgTitle = $(this).find('a').attr("href");
var imgDesc = $(this).find('.block').html();
var imgDescHeight = $(".main_image").find('.block').height();

if ($(this).is(".active")) {
return false;
} else {
alert(imgTitle);
var videoClone = $(".main_image object").clone()
.find("embed").attr({src: imgTitle}).end()
.find("param:first").attr({value: imgTitle});
$(".main_image object").remove();
$(".main_image").append(videoClone);

$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );

});
}
//more code



Still doesn't work! In fact, now quicktime movie doesn't ever get loaded.

Has anyone manipulated quicktime movies with JavaScript before? Could I be the only one in the world?

The only solution was to put the object and embed tags in divs and control the divs. However, the embed tags are still layered on top of everything else in page, even though they should be behind some things like a menu that I have animate up. It's like these embed tags defy all logic.