Changing an attribute using jQuery doesn't seem to work in Chrome

Question

Hi!

I have this jsbin http://jsbin.com/ehidi. I wanted to change the data attribute and param[name="movie"] value attribute. It seems to work on Firefox but not on Google chrome or Safari (webkit?).

Thanks!

Answer 1

You have two problems.

1. You were setting the wrong attribute on param[name="movie"]. You were setting a data attributes instead of a value attribute.
2. Your problem isn't necessarily jQuery; it's the behavior of the flash player in WebKit. It doesn't appear that the Flash player in WebKit auto-reloads when the underlying DOM object is modified.

Try this code instead. It rewrites the correct attribute, and it effectively reloads the flash player by removing then re-adding the flash player object from and to the DOM.

jQuery('#video-page-wrapper li a').click(function() {
  var url = "http://youtube.com/v/" + jQuery(this).attr("id");
  jQuery('.video-page object').attr({ data: url });
  jQuery('.video-page param[name="movie"]').attr({ value: url });
  jQuery('.video-page object').remove().appendTo('.video-page');
});