JQuery object / embed element issue with attr() method

I am trying to exchange the value of this embed element's src value, dependent of the click event.

It works in firefox and opera as intended, but not in safari, chrome, or IE.

$('.scrollableAr开发者_开发问答ea a').click(function() {
//retract id from selected anchor, and create + append new video parameter values.
var newVideoVal = 'http://www.youtube.com/v/' + $(this).attr("id") + '?version=3&autoplay=1';
$('#gallery_content object param').attr('value', newVideoVal);
$('#gallery_content object embed').attr('src', newVideoVal);
});

If i console.log the following in the click event function..

console.log($('#gallery_content embed').attr("src"));

The console returns, for each click event - the value of src, with alternating anchors id value, eg.

http://www.youtube.com/v/videoidhere?version=3&autoplay=1

―

Is this a browser issue?

An issue with manipulating the object / embed element?

Am i doing something wrong? (probably!)

It may be that you're overriding a param element that you're not intending to:

$('#gallery_content object param[name="movie"]').attr(...);

might do the trick for you. Embed elements don't work in IE, and possibly webkit (I can never remember which works where). I would suggest using the satay method of flash embedding. It's DRYer

As previously said, you are trying to set all params instead of the one with name="movie".

That being said, I don't believe you can change video's like that "on the fly". I would recommend making another page, let's say display_video.php or something. Write some php to generate the youtube embed code. Such as:

<?php if(isset($_POST['video_id'])) { ?>

    <object style="height: 390px; width: 640px">

        <param name="movie" value="http://www.youtube.com/v/<?=$_POST['video_id']?>?version=3">
        <param name="allowFullScreen" value="true">
        <param name="allowScriptAccess" value="always">

        <embed src="http://www.youtube.com/v/<?=$_POST['video_id']?>?version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390">

    </object>

<? } ?>

Then, use jquery's $.ajax() method to update it. Something like this:

$(document).ready(function() {

    $('.scrollableArea a').click(function() {

        var video_id = this.id // same thing as $(this).attr('id')

        $.ajax({
            type: "POST",
            url: "display_video.php",
            data: "video_id=" + video_id,
            success: function(html){
                $('#gallery_content').html(html);
            }
        });

    });

});

You may have to modify this a bit as I don't really know much about what you are doing. Hope this helps!

EDIT

Also, you may want to consider event delegation if you have a large number of a tags within your .scrollableArea. It would speed up your javascript. It would look something like this:

$(document).ready(function() {

    $('.scrollableArea').click(function(e) {

        // get tagname of the element that was clicked
        var element_clicked = e.target.tagName;

        if (element_clicked = 'a') {

            // now change the video

            var video_id = this.id // same thing as $(this).attr('id')

            $.ajax({
                type: "POST",
                url: "display_video.php",
                data: "video_id=" + video_id,
                success: function(html){
                    $('#gallery_content').html(html);
                }
            });
        }
    });

});

Event delegation is an efficient way to watch for an event on a large number of elements. Works by binding to a point farther up the DOM tree and watching for bubbling events. Basically, you are binding the click event to ONE element in the DOM instead of many.

Thanks to everyone, I've resolved my solution with a bit of combined logic, derived from these suggestions.

$('.scrollableArea a').click(function() {   
    var newObjElement = '<object style="width:580px;height:386px;"><param name="movie" value="http://www.youtube.com/v/'+this.id+'?version=3&autoplay=1"><embed src="http://www.youtube.com/v/'+this.id+'?version=3&autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="580" height="386"></object>';

    mainArea.html(newObjElement);
});

*Take note of this.id.

This works in most browsers, (safari, opera, chrome, firefox, ie8 / 9) with exception of ie6, and 7. (although not concerned for ie6)

Any ideas as to why / how to resolve the issue for ie7?

Cheers!