Change iframe source works once

[kkj930]

So, what I'm trying to do is change the source of an iframe, in this case a youtube vid. So I got the following:

<iframe width="640" height="360" id="youtube" src="http://www.youtube.com/embed/TZl6WpmYOR0?rel=0" name="iframe" frameborder="0"></iframe>

Now what I'm trying to do is: When a visitor clicks a link, the time of where the video is will change, like I want to go to 0:24 in the vid and let it autoplay, I use the following:

<a href="http://www.youtube.com/embed/TZl6WpmYOR0?rel=0&autoplay=1#t=0m24s" target="iframe">0:24</a>

But I want more links like that, so to go to 0:48 I use:

<a href="http://www.youtube.com/embed/TZl6WpmYOR0?rel=0&autoplay=1#t=0m48s" target="iframe">0:48</a>

Giving full code:

<a href="http://www.youtube.com/embed/TZl6WpmYOR0?rel=0&autoplay=1#t=0m24s" target="iframe">0:24</a>
<a href="http://www.youtube.com/embed/TZl6WpmYOR0?rel=0&autoplay=1#t=0m48s" target="iframe">0:48</a>
<iframe width="640" height="360" name="iframe" id="youtube" src="http://www.youtube.com/embed/TZl6WpmYOR0?rel=0" frameborder="0" allowfullscreen></iframe>

Now I can use this once, so I can click 0:24 or 0:48 and it will work, but when I click a link again, it won't do anything. I also tried placing the <a>'s after the iframe, but that won't change it. I also tried it with javascript before, but that gave me the same problem.

My javascript code (please do notice I started with js today, so Im a giant noob):

<iframe width="640" height="360" name="iframe" id="youtube" src="http://www.youtube.com/embed/TZl6WpmYOR0?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<script type="text/javascript">
function changeTime()
{
document.getElementById("youtube").src = "http://www.youtube.com/embed/TZl6WpmYOR0?rel=0&autoplay=1#t=0m24s";
}
</script>
<script type="text/javascript">
function changeTimer()
{
document.getElementById("youtube").src = "http://www.youtube.com/embed/TZl6WpmYOR0?rel=0&autoplay=1#t=0m48s";
}
</script>
<button type="button" onclick="changeTime()">Go To 0:24</button>
<button type="button" onclick="changeTimer()">Go To 0:48</button>

Your help is appreciated.

[kkj930]

Okay sorry guys, I found a solution on my own already

Turns out you shouldn't use the #t0m24s thing for this, but the &start=24. If you do it like that, It works just fine. However, I do still think it's odd ;-)

[kkj930]

However, this seems to be quite heavy, as my browser gets stuck when I do this for like a 20 minute video with about 20 different timers.
Is there a way to do this more lightly, so it will load faster?