How to make the "currentTime" method work correctly?

[abvas]

How to make the "currentTime" method work correctly?

I can't seem to get the "currentTime" method to work properly.
That's what I get?
When using the "currentTime" method, I get an ever-spinning spinner.

Desired behavior?
When using the "currentTime" method, it should look like a pause without a spinning spinner.

Here is the simplest example:

<script type="module" src="https://cdn.jsdelivr.net/npm/youtube-video-element@0"></script>
<youtube-video controls src="https://www.youtube.com/watch?v=rubNgGj3pYo"></youtube-video>

<script>
window.addEventListener("load", function() {
    document.querySelector('youtube-video').currentTime = 20;
})
</script>

Here is a live demo:
https://codepen.io/abvas/pen/LYXMBLx

What am I doing wrong? Is it possible somehow to solve this?
With other web components (eg <vimeo-video> and <hls-video>) this behavior is not observed.

Thank you.

[dylanjha]

Hi @abvas -- thanks for reporting. Just a stab in the dark, but I'm guessing this is related to the youtube embed being in an iframe and the async nature of that. If you wait until the video is playing does currentTime= work?

I don't know when we'll have time to fix this behavior, but open to anyone who can poke around and help debug it

[abvas]

Hi @dylanjha!

This behavior is observed only before the first launch of the video. If the video is already playing, or if the video was started and then paused, then the currentTime method works fine.

Thank you.

[luwes]

this should be fixed now, let me know if it's not working on your end.
https://youtube-video-element-mux.vercel.app/

[abvas]

Version 1.0.0
Now everything works great.
Thank you very much!