Reputation: 2777
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&hl=en_US&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&hl=en_US&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&hl=en_US&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
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
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