Jmh2013
Jmh2013

Reputation: 2777

Changing src of embedded video works in FF but not in IE or Chrome

I'm wanting to change the source of the embedded video when the user clicks on one of the elements in my list of videos. It works fine in FF but in both IE and Chrome, nothing happens. Can anyone tell me how I can get this functionality to work properly across all browsers?
Heres my JavaScript:

function updateSource(id)
{ 
    var video = document.getElementById('video');
    video.src=document.getElementById(id).getAttribute('data-value');
}

And Here is my HTML:

<embed id="video" src="https://www.youtube-nocookie.com/v/h5NeJaWR5WA?version=3&amp;hl=en_US&amp;rel=0&showinfo=0"
            type="application/x-shockwave-flash" width="480" height="360"
            allowscriptaccess="never" allowfullscreen="true"></embed>


<li id="one" class="videoLink" style="margin-top: -1em;" onclick="updateSource(this.id)"
 data-value="https://www.youtube-nocookie.com/v/h5NeJaWR5WA?version=3&amp;hl=en_US&amp;rel=0&showinfo=0">
      <img class="youtubeThumb" src="http://img.youtube.com/vi/h5NeJaWR5WA/default.jpg" />
      <p class="videoTitle">Video Number One!</p>
</li>
<li id="two" class="videoLink" onclick="updateSource(this.id)"
 data-value="http://www.youtube-nocookie.com/v/r19okL-IW6Q?version=3&amp;hl=en_US&amp;rel=0&showinfo=0">
      <img class="youtubeThumb" src="http://img.youtube.com/vi/r19okL-IW6Q/default.jpg" />
      <p class="videoTitle">Video Number Two!</p>
</li>

Upvotes: 0

Views: 769

Answers (2)

Joe Johnson
Joe Johnson

Reputation: 1824

Actually, it does look like the number (id value) is the problem. It thinks you're passing an integer (not a string) as an index (not an id value).

Upvotes: 0

CgodLEY
CgodLEY

Reputation: 994

Solution: http://jsfiddle.net/tuDXg/4/

I don't believe the embed element supports updating the src attribute. You should wrap it in a div and change the div's innerHTML to be a new embed element with the updated src.

Upvotes: 1

Related Questions